@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/components/time-picker.js

@@ -1,258 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as luxon } from './luxon.js';
-import { d as defineCustomElement$6 } from './button.js';
-import { d as defineCustomElement$5 } from './date-time-card.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './spinner.js';
-import { d as defineCustomElement$1 } from './typography.js';
-
-const timePickerCss = "label{color:var(--theme-color-soft-text)}input,input:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea,textarea:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}: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 .form-control,:host .form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);-webkit-padding-start:0.5rem;padding-inline-start:0.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .form-control::-moz-placeholder,:host .form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}:host .form-control::placeholder,:host .form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:focus-visible{color:var(--theme-input--color)}:host .form-control[type=number]{text-align:right}:host .form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .form-control.readonly,:host .form-control[readonly]{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem}:host .form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only,:host .form-control[readonly],:host .form-control[readOnly],:host .form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only::-moz-placeholder,:host .form-control[readonly]::-moz-placeholder,:host .form-control[readOnly]::-moz-placeholder,:host .form-control.readonly::-moz-placeholder{color:transparent}:host .form-control:-moz-read-only::placeholder{color:transparent}:host .form-control:read-only::placeholder,:host .form-control[readonly]::placeholder,:host .form-control[readOnly]::placeholder,:host .form-control.readonly::placeholder{color:transparent}:host .form-control:disabled,:host .form-control.disabled{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}:host .form-control:disabled::-moz-placeholder,:host .form-control.disabled::-moz-placeholder{color:transparent}:host .form-control:disabled::placeholder,:host .form-control.disabled::placeholder{color:transparent}:host .form-control-plaintext{outline:0}:host .form-group{position:relative}:host .input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}:host .input-wrapper>.glyph{display:block;position:absolute;-webkit-margin-start:0.312rem;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}:host .input-wrapper>input{-webkit-padding-start:2.2rem;padding-inline-start:2.2rem}:host select.form-control{padding:0 0.312rem}:host textarea.form-control{padding:0.375rem 0.5rem}:host .was-validated .form-control:invalid,:host .was-validated .is-invalid{background-color:var(--theme-input-error--background);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center !important;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}:host input.disabled,:host input:disabled{color:var(--theme-input--color--disabled)}:host input:-moz-read-only{cursor:default}:host input:read-only,:host input.readonly{cursor:default}:host .header{display:flex;align-items:center;justify-content:center;height:2.5rem}:host .clock{display:flex;justify-content:center;align-items:center;padding:4.25rem 0}:host input,:host .time-reference{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.25rem;margin-bottom:0.25rem;}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button,:host .time-reference::-webkit-outer-spin-button,:host .time-reference::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}:host input[type=number],:host .time-reference[type=number]{-moz-appearance:textfield}:host .form-control[type=number]{text-align:center}:host .columns{display:flex;flex-direction:column;align-items:center;justify-content:space-around}:host .column-seperator{display:flex;align-items:center;margin:0 0.25rem}:host .button{display:flex;justify-content:flex-end}:host .default-space{margin-left:1rem}:host .text-align{text-align:center}:host .hidden{display:none}:host .time-reference{margin-top:0.5rem;margin-bottom:0.5rem}";
-
-const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.done = createEvent(this, "done", 7);
-    this.timeChange = createEvent(this, "timeChange", 7);
-    this._time = luxon.DateTime.now();
-    this.format = 'TT';
-    this.corners = 'rounded';
-    this.individual = true;
-    this.showHour = false;
-    this.showMinutes = false;
-    this.showSeconds = false;
-    this.time = luxon.DateTime.now().toFormat(this.format);
-    this.showTimeReference = undefined;
-    this.timeReference = luxon.DateTime.fromFormat(this.time, this.format).toFormat('a');
-    this.textSelectTime = 'Done';
-    this.hourInputRef = undefined;
-    this.minuteInputRef = undefined;
-    this.secondInputRef = undefined;
-    this.referenceInputRef = undefined;
-  }
-  get hour() {
-    return this._time.hour;
-  }
-  get minutes() {
-    return this._time.minute;
-  }
-  get seconds() {
-    return this._time.second;
-  }
-  setInputValue(inputElement, value, max) {
-    if (value > max) {
-      inputElement.value = max.toString();
-    }
-    else if (value < 0) {
-      inputElement.value = '0';
-    }
-    else {
-      inputElement.value = value.toString();
-    }
-    this.updateAndEmitTime();
-  }
-  updateAndEmitTime() {
-    this._time = this._time.set({
-      hour: Number(this.hourInputRef.value),
-      minute: Number(this.minuteInputRef.value),
-      second: Number(this.secondInputRef.value),
-    });
-    this.setHourAccordingToReference();
-    this.emitTimeChange();
-  }
-  toggleInputValue(inputElement, currentValue, step, max) {
-    if (step === 'up') {
-      if (currentValue === max) {
-        inputElement.value = '0';
-      }
-      else {
-        inputElement.stepUp();
-      }
-    }
-    else {
-      if (currentValue === 0) {
-        inputElement.value = max.toString();
-      }
-      else {
-        inputElement.stepDown();
-      }
-    }
-  }
-  toggleHourInputWithRef(inputElement, currentValue, step) {
-    if (step === 'up') {
-      if (currentValue === this.getMaxHour()) {
-        inputElement.value = '0';
-      }
-      else {
-        inputElement.stepUp();
-      }
-    }
-    else {
-      if ((this.showTimeReference &&
-        this.timeReference === 'PM' &&
-        currentValue === 12) ||
-        currentValue === 0) {
-        inputElement.value = this.getMaxDisplayedHour().toString();
-      }
-      else {
-        inputElement.stepDown();
-      }
-    }
-  }
-  updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
-    if (hours) {
-      if (this.showTimeReference) {
-        this.toggleHourInputWithRef(this.hourInputRef, this.hour, step);
-      }
-      else {
-        this.toggleInputValue(this.hourInputRef, this.hour, step, 23);
-      }
-    }
-    if (minutes) {
-      this.toggleInputValue(this.minuteInputRef, this.minutes, step, 59);
-    }
-    if (seconds) {
-      this.toggleInputValue(this.secondInputRef, this.seconds, step, 59);
-    }
-    this.updateAndEmitTime();
-  }
-  changeReference() {
-    if (this.timeReference === 'AM') {
-      this.timeReference = 'PM';
-    }
-    else {
-      this.timeReference = 'AM';
-    }
-    this.setHourAccordingToReference();
-    this.emitTimeChange();
-  }
-  setHourAccordingToReference() {
-    if (!this.showTimeReference) {
-      return;
-    }
-    let hour = Number(this.hourInputRef.value);
-    if (this.timeReference === 'PM')
-      hour += 12;
-    this._time = this._time.set({ hour });
-  }
-  emitTimeChange() {
-    const time = this._time.toFormat(this.format);
-    this.timeChange.emit(time);
-  }
-  componentWillLoad() {
-    this._time = luxon.DateTime.fromFormat(this.time, this.format);
-    if (this.showTimeReference === undefined) {
-      const matchedKeys = Object.keys(luxon.DateTime.fromFormatExplain(this.time, this.format).matches);
-      this.showTimeReference = matchedKeys.includes('a');
-    }
-  }
-  /**
-   * Get current time
-   */
-  async getCurrentTime() {
-    return this._time.toFormat(this.format);
-  }
-  getDisplayedHour() {
-    if (this.showTimeReference && this.timeReference === 'PM') {
-      return this._time.hour - 12;
-    }
-    return this._time.hour;
-  }
-  getMaxDisplayedHour() {
-    if (this.showTimeReference) {
-      return 11;
-    }
-    return 23;
-  }
-  getMaxHour() {
-    if (this.showTimeReference && this.timeReference === 'AM') {
-      return 11;
-    }
-    return 23;
-  }
-  render() {
-    let hideHour = !this.showHour;
-    let hideMinutes = !this.showMinutes;
-    let hideSeconds = !this.showSeconds;
-    const hideTimeReference = !this.showTimeReference;
-    const hideIndividual = !this.individual;
-    if (hideHour && hideMinutes && hideSeconds) {
-      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("ix-typography", { variant: "default-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", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), 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", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), 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", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), 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("div", { class: "time-reference" }, this.timeReference), 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 style() { return timePickerCss; }
-}, [1, "ix-time-picker", {
-    "format": [1],
-    "corners": [1],
-    "individual": [4],
-    "showHour": [4, "show-hour"],
-    "showMinutes": [4, "show-minutes"],
-    "showSeconds": [4, "show-seconds"],
-    "time": [1],
-    "showTimeReference": [1032, "show-time-reference"],
-    "timeReference": [1025, "time-reference"],
-    "textSelectTime": [1, "text-select-time"],
-    "hourInputRef": [32],
-    "minuteInputRef": [32],
-    "secondInputRef": [32],
-    "referenceInputRef": [32],
-    "getCurrentTime": [64]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-time-picker", "ix-button", "ix-date-time-card", "ix-icon", "ix-icon-button", "ix-spinner", "ix-typography"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-time-picker":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TimePicker);
-      }
-      break;
-    case "ix-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "ix-date-time-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "ix-icon":
-      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;
-    case "ix-typography":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { TimePicker as T, defineCustomElement as d };
-
-//# sourceMappingURL=time-picker.js.map

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

@@ -1 +0,0 @@
-{"file":"time-picker.js","mappings":"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","names":["DateTime"],"sources":["./src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=shadow","./src/components/time-picker/time-picker.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/shadow-dom/component';\n@import 'components/form/input';\n\n:host {\n  @include ix-component;\n\n  @import 'legacy/components/forms';\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: $large-control-height;\n  }\n\n  .clock {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 4.25rem 0;\n  }\n\n  input,\n  .time-reference {\n    width: 2.625rem;\n    height: $large-space;\n    text-align: center;\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\n\n    /* Chrome, Safari, Edge, Opera */\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0 0.3125rem;\n    }\n\n    /* Firefox */\n    &[type='number'] {\n      -moz-appearance: textfield;\n    }\n  }\n\n  .form-control[type='number'] {\n    text-align: center;\n  }\n\n  .columns {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n  }\n\n  .column-seperator {\n    display: flex;\n    align-items: center;\n    margin: 0 $tiny-space;\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .default-space {\n    margin-left: $default-space;\n  }\n\n  .text-align {\n    text-align: center;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .time-reference {\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\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  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\n@Component({\n  tag: 'ix-time-picker',\n  styleUrl: 'time-picker.scss',\n  shadow: true,\n})\nexport class TimePicker {\n  /**\n   * Format of time string\n   *\n   * @since 1.1.0\n   */\n  @Prop() format: string = 'TT';\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: TimePickerCorners = 'rounded';\n\n  /**\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string = DateTime.now().toFormat(this.format);\n\n  /**\n   * Show time reference input\n   *\n   * @since 1.1.0 time reference is default aligned with formt tt\n   */\n  @Prop({ mutable: true }) showTimeReference = undefined;\n\n  /**\n   * Set time reference\n   */\n  @Prop({ mutable: true }) timeReference: 'AM' | 'PM' = DateTime.fromFormat(\n    this.time,\n    this.format\n  ).toFormat('a') as 'PM' | 'AM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectTime = 'Done';\n\n  /**\n   * Time event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change event\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  @State() hourInputRef: HTMLInputElement;\n  @State() minuteInputRef: HTMLInputElement;\n  @State() secondInputRef: HTMLInputElement;\n  @State() referenceInputRef: HTMLInputElement;\n\n  get hour() {\n    return this._time.hour;\n  }\n\n  get minutes() {\n    return this._time.minute;\n  }\n\n  get seconds() {\n    return this._time.second;\n  }\n\n  private _time: DateTime = DateTime.now();\n\n  private setInputValue(\n    inputElement: HTMLInputElement,\n    value: number,\n    max: number\n  ) {\n    if (value > max) {\n      inputElement.value = max.toString();\n    } else if (value < 0) {\n      inputElement.value = '0';\n    } else {\n      inputElement.value = value.toString();\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private updateAndEmitTime() {\n    this._time = this._time.set({\n      hour: Number(this.hourInputRef.value),\n      minute: Number(this.minuteInputRef.value),\n      second: Number(this.secondInputRef.value),\n    });\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private toggleInputValue(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down',\n    max: number\n  ) {\n    if (step === 'up') {\n      if (currentValue === max) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (currentValue === 0) {\n        inputElement.value = max.toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private toggleHourInputWithRef(\n    inputElement: HTMLInputElement,\n    currentValue: number,\n    step: 'up' | 'down'\n  ) {\n    if (step === 'up') {\n      if (currentValue === this.getMaxHour()) {\n        inputElement.value = '0';\n      } else {\n        inputElement.stepUp();\n      }\n    } else {\n      if (\n        (this.showTimeReference &&\n          this.timeReference === 'PM' &&\n          currentValue === 12) ||\n        currentValue === 0\n      ) {\n        inputElement.value = this.getMaxDisplayedHour().toString();\n      } else {\n        inputElement.stepDown();\n      }\n    }\n  }\n\n  private updateInput(\n    step: 'up' | 'down',\n    { hours = undefined, minutes = undefined, seconds = undefined }\n  ) {\n    if (hours) {\n      if (this.showTimeReference) {\n        this.toggleHourInputWithRef(this.hourInputRef, this.hour, step);\n      } else {\n        this.toggleInputValue(this.hourInputRef, this.hour, step, 23);\n      }\n    }\n\n    if (minutes) {\n      this.toggleInputValue(this.minuteInputRef, this.minutes, step, 59);\n    }\n\n    if (seconds) {\n      this.toggleInputValue(this.secondInputRef, this.seconds, step, 59);\n    }\n\n    this.updateAndEmitTime();\n  }\n\n  private changeReference() {\n    if (this.timeReference === 'AM') {\n      this.timeReference = 'PM';\n    } else {\n      this.timeReference = 'AM';\n    }\n\n    this.setHourAccordingToReference();\n\n    this.emitTimeChange();\n  }\n\n  private setHourAccordingToReference() {\n    if (!this.showTimeReference) {\n      return;\n    }\n\n    let hour = Number(this.hourInputRef.value);\n\n    if (this.timeReference === 'PM') hour += 12;\n\n    this._time = this._time.set({ hour });\n  }\n\n  private emitTimeChange() {\n    const time = this._time.toFormat(this.format);\n    this.timeChange.emit(time);\n  }\n\n  componentWillLoad() {\n    this._time = DateTime.fromFormat(this.time, this.format);\n    if (this.showTimeReference === undefined) {\n      const matchedKeys = Object.keys(\n        DateTime.fromFormatExplain(this.time, this.format).matches\n      );\n      this.showTimeReference = matchedKeys.includes('a');\n    }\n  }\n\n  /**\n   * Get current time\n   */\n  @Method()\n  async getCurrentTime() {\n    return this._time.toFormat(this.format);\n  }\n\n  private getDisplayedHour() {\n    if (this.showTimeReference && this.timeReference === 'PM') {\n      return this._time.hour - 12;\n    }\n\n    return this._time.hour;\n  }\n\n  private getMaxDisplayedHour() {\n    if (this.showTimeReference) {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  private getMaxHour() {\n    if (this.showTimeReference && this.timeReference === 'AM') {\n      return 11;\n    }\n\n    return 23;\n  }\n\n  render() {\n    let hideHour = !this.showHour;\n    let hideMinutes = !this.showMinutes;\n    let hideSeconds = !this.showSeconds;\n    const hideTimeReference = !this.showTimeReference;\n    const hideIndividual = !this.individual;\n\n    if (hideHour && hideMinutes && hideSeconds) {\n      hideHour = false;\n      hideMinutes = false;\n      hideSeconds = false;\n    }\n\n    const hideHourSeperator = hideMinutes || hideHour;\n    const hideMinutesSeperator = hideSeconds || hideMinutes;\n\n    return (\n      <Host>\n        <ix-date-time-card individual={this.individual} corners={this.corners}>\n          <div class=\"header\" slot=\"header\">\n            <ix-typography variant=\"default-title\">Time</ix-typography>\n          </div>\n\n          <div class=\"clock\">\n            <div class={{ columns: true, hidden: hideHour }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { hours: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"hours\"\n                type=\"number\"\n                placeholder=\"HH\"\n                min=\"0\"\n                max={this.getMaxDisplayedHour()}\n                value={this.getDisplayedHour()}\n                ref={(ref) => (this.hourInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.hourInputRef,\n                    Number(this.hourInputRef.value),\n                    this.getMaxDisplayedHour()\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { hours: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideHourSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideMinutes }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { minutes: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"minutes\"\n                type=\"number\"\n                placeholder=\"MM\"\n                min=\"0\"\n                max=\"59\"\n                value={this.minutes}\n                ref={(ref) => (this.minuteInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.minuteInputRef,\n                    Number(this.minuteInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { minutes: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{ 'column-seperator': true, hidden: hideMinutesSeperator }}\n            >\n              :\n            </div>\n\n            <div class={{ columns: true, hidden: hideSeconds }}>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('up', { seconds: true })}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <input\n                class=\"form-control\"\n                name=\"seconds\"\n                type=\"number\"\n                placeholder=\"SS\"\n                min=\"0\"\n                max=\"59\"\n                value={this.seconds}\n                ref={(ref) => (this.secondInputRef = ref)}\n                onChange={() =>\n                  this.setInputValue(\n                    this.secondInputRef,\n                    Number(this.secondInputRef.value),\n                    59\n                  )\n                }\n              ></input>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.updateInput('down', { seconds: true })}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n\n            <div\n              class={{\n                columns: true,\n                'default-space': true,\n                hidden: hideTimeReference,\n              }}\n            >\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon=\"chevron-up\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <div class=\"time-reference\">{this.timeReference}</div>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeReference()}\n                ghost\n                icon=\"chevron-down\"\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n          </div>\n\n          <div class={{ button: true, hidden: hideIndividual }}>\n            <ix-button\n              onClick={() => this.done.emit(this._time.toFormat(this.format))}\n            >\n              {this.textSelectTime}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/toast.js

@@ -1,111 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './icon-button.js';
-import { d as defineCustomElement$1 } from './spinner.js';
-
-const toastCss = ":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}: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 .toast-body{display:flex;position:relative;width:100%;flex-grow:1}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}:host .toast-body .toast-content .toast-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}:host .toast-body .toast-content .toast-message{min-width:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}:host .toast-close{display:flex;position:relative;margin:0.75rem;pointer-events:all}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
-
-const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.closeToast = createEvent(this, "closeToast", 7);
-    this.type = 'info';
-    this.toastTitle = undefined;
-    this.autoCloseDelay = 5000;
-    this.autoClose = true;
-    this.icon = undefined;
-    this.iconColor = undefined;
-    this.progress = 0;
-    this.touched = false;
-  }
-  getIcon() {
-    if (this.icon) {
-      return h("ix-icon", { name: this.icon, color: this.iconColor, size: "24" });
-    }
-    switch (this.type) {
-      case 'info':
-        return h("ix-icon", { name: 'info', size: "24", color: "color-std-text" });
-      case 'error':
-        return h("ix-icon", { name: 'error', size: "24", color: "color-alarm" });
-      case 'success':
-        return h("ix-icon", { name: 'success', size: "24", color: "color-success" });
-      case 'warning':
-        return h("ix-icon", { name: 'warning', size: "24", color: "color-warning" });
-      default:
-        return '';
-    }
-  }
-  close() {
-    if (this.hostElement) {
-      this.hostElement.classList.add('animate__fadeOut');
-    }
-    setTimeout(() => {
-      this.closeToast.emit();
-    }, 250);
-  }
-  render() {
-    let progressBarStyle = {};
-    const progressBarClass = ['toast-progress-bar'];
-    progressBarStyle = {
-      animationDuration: `${this.autoCloseDelay}ms`,
-      animationPlayState: this.touched ? 'paused' : 'running',
-    };
-    progressBarClass.push('toast-progress-bar--animated');
-    return (h(Host, { class: "animate__animated animate__fadeIn" }, h("div", { class: "toast-body", onPointerLeave: () => {
-        this.touched = false;
-      }, onPointerEnter: () => {
-        this.touched = true;
-      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title" }, this.toastTitle)) : null, h("div", { class: "toast-message" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
-        this.close();
-      }, onTransitionEnd: () => {
-        if (this.progress === 0) {
-          this.close();
-        }
-      } })) : null));
-  }
-  get hostElement() { return this; }
-  static get style() { return toastCss; }
-}, [1, "ix-toast", {
-    "type": [1],
-    "toastTitle": [1, "toast-title"],
-    "autoCloseDelay": [2, "auto-close-delay"],
-    "autoClose": [4, "auto-close"],
-    "icon": [1],
-    "iconColor": [1, "icon-color"],
-    "progress": [32],
-    "touched": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-toast", "ix-icon", "ix-icon-button", "ix-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-toast":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Toast);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "ix-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { Toast as T, defineCustomElement as d };
-
-//# sourceMappingURL=toast.js.map

package/dist/components/toast.js.map

@@ -1 +0,0 @@
-{"file":"toast.js","mappings":"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","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","./src/components/toast/toast.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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    width: 100%;\n    flex-grow: 1;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n      max-width: 10.25rem;\n      margin-top: calc(\n        #{$default-space} + var(--theme-toast--border-thickness)\n      );\n      margin-bottom: $medium-space;\n\n      .toast-title {\n        @include text-default-title-single;\n      }\n      .toast-message {\n        min-width: 0;\n\n        @include text-default;\n      }\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    margin: $medium-space;\n    pointer-events: all;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\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  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon=\"close\"\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/tree-item.js

@@ -1,57 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './icon.js';
-
-const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}: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 .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform 150ms ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
-
-const TreeItem = /*@__PURE__*/ proxyCustomElement(class TreeItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.toggle = createEvent(this, "toggle", 7);
-    this.itemClick = createEvent(this, "itemClick", 7);
-    this.text = undefined;
-    this.hasChildren = undefined;
-    this.context = undefined;
-  }
-  render() {
-    var _a, _b, _c;
-    return (h(Host, { class: {
-        selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
-      } }, h("div", { class: "icon-toggle-container", onClick: (e) => {
-        e.preventDefault();
-        this.toggle.emit();
-      } }, this.hasChildren ? (h("ix-icon", { name: "chevron-right", size: "16", class: {
-        ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
-      }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { class: "tree-node-container", onClick: () => {
-        this.itemClick.emit();
-      } }, this.text, h("slot", null))));
-  }
-  static get style() { return treeItemCss; }
-}, [1, "ix-tree-item", {
-    "text": [1],
-    "hasChildren": [4, "has-children"],
-    "context": [16]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-tree-item", "ix-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-tree-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TreeItem);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { TreeItem as T, defineCustomElement as d };
-
-//# sourceMappingURL=tree-item.js.map

package/dist/components/tree-item.js.map

@@ -1 +0,0 @@
-{"file":"tree-item.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,grDAAgrD;;MCiBvrD,QAAQ;;;;;;;;;;;EA0BnB,MAAM;;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;OACnC,IAED,WACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;QACT,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;OACpB,IAEA,IAAI,CAAC,WAAW,IACf,eACE,IAAI,EAAC,eAAe,EACpB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;QACL,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;OAC/C,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACN,WACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;QACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB,IAEA,IAAI,CAAC,IAAI,EACV,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","./src/components/tree-item/tree-item.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  display: flex;\n  align-items: center;\n\n  height: 32px;\n  width: 100%;\n\n  cursor: pointer;\n\n  .tree-node-container {\n    display: flex;\n    align-items: center;\n    height: $x-large-space;\n    flex-grow: 1;\n    align-items: center;\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n\n    ix-icon {\n      transition: transform $default-time ease-in-out;\n\n      &.icon-toggle-down {\n        transform: rotate(90deg);\n      }\n    }\n  }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n  background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n  background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n  background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n  background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n  background-color: var(--theme-tree-item--background--selected-active);\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n  tag: 'ix-tree-item',\n  styleUrl: 'tree-item.scss',\n  shadow: true,\n})\nexport class TreeItem {\n  /**\n   * Text\n   */\n  @Prop() text: string;\n\n  /**\n   * Has tree item children\n   */\n  @Prop() hasChildren: boolean;\n\n  /**\n   * Context\n   */\n  @Prop() context: TreeItemContext;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle: EventEmitter<void>;\n\n  /**\n   * Clicked\n   */\n  @Event() itemClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.context?.isSelected,\n        }}\n      >\n        <div\n          class=\"icon-toggle-container\"\n          onClick={(e) => {\n            e.preventDefault();\n            this.toggle.emit();\n          }}\n        >\n          {this.hasChildren ? (\n            <ix-icon\n              name=\"chevron-right\"\n              size=\"16\"\n              class={{\n                ['icon-toggle-down']: this.context?.isExpanded,\n              }}\n              color={`color-${\n                this.context?.isExpanded ? 'primary' : 'std-text'\n              }`}\n            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          {this.text}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/typed-event.js

@@ -1,46 +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.
- */
-class TypedEvent {
-  constructor() {
-    this.listeners = [];
-    this.listenersOncer = [];
-    this.on = (listener) => {
-      this.listeners.push(listener);
-      return {
-        dispose: () => this.off(listener),
-      };
-    };
-    this.once = (listener) => {
-      this.listenersOncer.push(listener);
-    };
-    this.off = (listener) => {
-      const callbackIndex = this.listeners.indexOf(listener);
-      if (callbackIndex > -1) {
-        this.listeners.splice(callbackIndex, 1);
-      }
-    };
-    this.emit = (event) => {
-      /** Update any general listeners */
-      this.listeners.forEach((listener) => listener(event));
-      /** Clear the `once` queue */
-      if (this.listenersOncer.length > 0) {
-        const toCall = this.listenersOncer;
-        this.listenersOncer = [];
-        toCall.forEach((listener) => listener(event));
-      }
-    };
-    this.pipe = (te) => {
-      return this.on((e) => te.emit(e));
-    };
-  }
-}
-
-export { TypedEvent as T };
-
-//# sourceMappingURL=typed-event.js.map

package/dist/components/typed-event.js.map

@@ -1 +0,0 @@
-{"file":"typed-event.js","mappings":"AAAA;;;;;;;;MAiBa,UAAU;EAAvB;IACkB,cAAS,GAAkB,EAAE,CAAC;IACvC,mBAAc,GAAkB,EAAE,CAAC;IAE1C,OAAE,GAAG,CAAC,QAAqB;MACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAC9B,OAAO;QACL,OAAO,EAAE,MAAM,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;OAClC,CAAC;KACH,CAAC;IAEF,SAAI,GAAG,CAAC,QAAqB;MAC3B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC,CAAC;IAEF,QAAG,GAAG,CAAC,QAAqB;MAC1B,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;MACvD,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;OACzC;KACF,CAAC;IAEF,SAAI,GAAG,CAAC,KAAQ;;MAEd,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;;MAGtD,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;QACzB,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;OAC/C;KACF,CAAC;IAEF,SAAI,GAAG,CAAC,EAAiB;MACvB,OAAO,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;KACnC,CAAC;GACH;;;;;","names":[],"sources":["./src/components/utils/typed-event.ts"],"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 interface Listener<T> {\n  (event: T): any;\n}\n\nexport interface Disposable {\n  dispose(): void;\n}\n\nexport class TypedEvent<T> {\n  public readonly listeners: Listener<T>[] = [];\n  public listenersOncer: Listener<T>[] = [];\n\n  on = (listener: Listener<T>): Disposable => {\n    this.listeners.push(listener);\n    return {\n      dispose: () => this.off(listener),\n    };\n  };\n\n  once = (listener: Listener<T>): void => {\n    this.listenersOncer.push(listener);\n  };\n\n  off = (listener: Listener<T>) => {\n    const callbackIndex = this.listeners.indexOf(listener);\n    if (callbackIndex > -1) {\n      this.listeners.splice(callbackIndex, 1);\n    }\n  };\n\n  emit = (event: T) => {\n    /** Update any general listeners */\n    this.listeners.forEach((listener) => listener(event));\n\n    /** Clear the `once` queue */\n    if (this.listenersOncer.length > 0) {\n      const toCall = this.listenersOncer;\n      this.listenersOncer = [];\n      toCall.forEach((listener) => listener(event));\n    }\n  };\n\n  pipe = (te: TypedEvent<T>): Disposable => {\n    return this.on((e) => te.emit(e));\n  };\n}\n"],"version":3}