npm - @siemens/ix - Versions diffs - 1.6.2 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.2 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

package/dist/collection/components/time-picker/time-picker.css CHANGED Viewed

@@ -18,30 +18,261 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
-.header {
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * 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.
+   */
+  /* Dimensions */
+  /* Font sizes */
+  /* Line heights */
+  /* Animation timings */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  /*
+   * SPDX-FileCopyrightText: 2023 Siemens AG
+   *
+   * SPDX-License-Identifier: MIT
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+: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 .header {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.title {
+:host .title {
   display: flex;
   align-items: center;
   font: var(--theme-text-default-title);
   min-height: 2.5rem;
   color: var(--theme-datepicker-time-header--color);
 }
-.clock {
-  height: 100%;
+:host .clock {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 5rem 0;
 }
-input,
-.time-reference {
+:host input,
+:host .time-reference {
   width: 2.625rem;
   height: 1.5rem;
   text-align: center;
@@ -50,51 +281,43 @@ input,
   /* Chrome, Safari, Edge, Opera */
   /* Firefox */
 }
-input::-webkit-outer-spin-button, input::-webkit-inner-spin-button,
-.time-reference::-webkit-outer-spin-button,
-.time-reference::-webkit-inner-spin-button {
+: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;
 }
-input[type=number],
-.time-reference[type=number] {
+:host input[type=number],
+:host .time-reference[type=number] {
   -moz-appearance: textfield;
 }
-.form-control[type=number] {
+:host .form-control[type=number] {
   text-align: center;
 }
-.columns {
+:host .columns {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
 }
-.column-seperator {
+:host .column-seperator {
   display: flex;
   align-items: center;
   margin: 0 0.25rem;
 }
-.button {
+:host .button {
   display: flex;
   justify-content: flex-end;
 }
-.default-space {
+:host .default-space {
   margin-left: 1rem;
 }
-.text-align {
+:host .text-align {
   text-align: center;
 }
-.hidden {
+:host .hidden {
   display: none;
 }
-.time-reference {
+:host .time-reference {
   margin: 0.75rem 0;
 }

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

@@ -179,14 +179,14 @@ export class TimePicker {
     }
     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", { 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: {
+    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", { 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)))));
+      } }, 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 is() { return "ix-time-picker"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["time-picker.scss"]
@@ -462,6 +462,5 @@ export class TimePicker {
       }
     };
   }
-  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=time-picker.js.map

package/dist/collection/components/time-picker/time-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { 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 scoped: true,\n})\nexport class TimePicker {\n @Element() hostElement!: HTMLIxTimePickerElement;\n\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 <div class=\"title\">Time</div>\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"]}
1	+ {"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n 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 <div class=\"title\">Time</div>\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"]}

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

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { TypedEvent } from '../utils/typed-event';
 export class ToastContainer {
   constructor() {
@@ -71,7 +71,7 @@ export class ToastContainer {
     return h(Host, null);
   }
   static get is() { return "ix-toast-container"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() {
     return {
       "containerId": {
@@ -170,7 +170,6 @@ export class ToastContainer {
       }
     };
   }
-  static get elementRef() { return "host"; }
   static get watchers() {
     return [{
         "propName": "position",

package/dist/collection/components/toast/toast-container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,~~EACL~~,SAAS,~~EACT~~,~~OAAO,EACP,~~CAAC,~~EACD~~,IAAI,~~EACJ~~,MAAM,~~EACN~~,IAAI,~~EACJ~~,KAAK,~~GACN~~,MAAM,eAAe,CAAC;~~AACvB~~,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOlD,MAAM,OAAO,cAAc;;~~IAeR~~,0BAAqB,GAAG,mBAAmB,CAAC;uBAVvC,iBAAiB;0BAId,iBAAiB;oBAIO,cAAc;;EAI/D,IAAI,aAAa;IACf,OAAO,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EACnD,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;MAC9C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MACrD,cAAc,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;MACrC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MAClD,cAAc,CAAC,SAAS,CAAC,GAAG,CAC1B,GAAG,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAChD,CAAC;MACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;KAC3C;EACH,CAAC;EAGD,gBAAgB,CAAC,WAAmB,EAAE,WAAmB;IACvD,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjE,cAAc,CAAC,SAAS,CAAC,MAAM,CAC7B,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAC9C,CAAC;IACF,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,qBAAqB,GAAG,WAAW,EAAE,CAAC,CAAC;EAC9E,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,SAAS,CAAC,MAAmB;IACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,IAAI,UAAU,EAAmB,CAAC;IAElD,SAAS,WAAW,CAAC,MAAY;MAC/B,KAAK,CAAC,MAAM,EAAE,CAAC;MACf,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;IAChC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IACnC,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC;IAC7C,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;IACzB,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;IACnC,KAAK,CAAC,gBAAgB,CACpB,YAAY,EACZ,CAAC,KAAmC,EAAE,EAAE;MACtC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;MACzB,WAAW,CAAC,MAAM,CAAC,CAAC;IACtB,CAAC,CACF,CAAC;IAEF,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,QAAQ,EAAE;MACtC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;KAClC;SAAM;MACL,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;KACnC;IAED,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAEtC,OAAO;MACL,OAAO;MACP,KAAK,EAAE,CAAC,MAAY,EAAE,EAAE;QACtB,WAAW,CAAC,MAAM,CAAC,CAAC;MACtB,CAAC;KACF,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;EACvB,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component~~,\n Element,\n~~ h~~,\n~~ Host~~,\n~~ Method~~,\n~~ Prop~~,\n~~ Watch~~,\n~~} from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n tag: 'ix-toast-container',\n ~~scoped~~: true,\n})\nexport class ToastContainer {\n ~~@Element() host!: HTMLIxToastContainerElement;\n\n~~ /\n /\n @Prop() containerId = 'toast-container';\n\n /*\n /\n @Prop() containerClass = 'toast-container';\n\n /*\n /\n @Prop() position: 'bottom-right' \| 'top-right' = 'bottom-right';\n\n private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n get hostContainer() {\n return document.getElementById(this.containerId);\n }\n\n componentDidLoad() {\n if (!document.getElementById(this.containerId)) {\n const toastContainer = document.createElement('div');\n toastContainer.id = this.containerId;\n toastContainer.classList.add(this.containerClass);\n toastContainer.classList.add(\n `${this.PREFIX_POSITION_CLASS}${this.position}`\n );\n document.body.appendChild(toastContainer);\n }\n }\n\n @Watch('position')\n onPositionChange(newPosition: string, oldPosition: string) {\n const toastContainer = document.getElementById(this.containerId);\n toastContainer.classList.remove(\n `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n );\n toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n }\n\n /*\n Display a toast message\n * @param config\n */\n @Method()\n async showToast(config: ToastConfig) {\n const toast = document.createElement('ix-toast');\n\n const onClose = new TypedEvent<any \| undefined>();\n\n function removeToast(result?: any) {\n toast.remove();\n onClose.emit(result);\n }\n\n toast.toastTitle = config.title;\n toast.type = config.type;\n toast.autoClose = config.autoClose;\n toast.autoCloseDelay = config.autoCloseDelay;\n toast.icon = config.icon;\n toast.iconColor = config.iconColor;\n toast.addEventListener(\n 'closeToast',\n (event: CustomEvent<any \| undefined>) => {\n const { detail } = event;\n removeToast(detail);\n }\n );\n\n if (typeof config.message === 'string') {\n toast.innerText = config.message;\n } else {\n toast.appendChild(config.message);\n }\n\n this.hostContainer.appendChild(toast);\n\n return {\n onClose,\n close: (result?: any) => {\n removeToast(result);\n },\n };\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"]}
1	+ {"version":3,"file":"toast-container.js","sourceRoot":"","sources":["../../../src/components/toast/toast-container.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n tag: 'ix-toast-container',\n shadow: true,\n})\nexport class ToastContainer {\n /\n /\n @Prop() containerId = 'toast-container';\n\n /*\n /\n @Prop() containerClass = 'toast-container';\n\n /*\n /\n @Prop() position: 'bottom-right' \| 'top-right' = 'bottom-right';\n\n private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n get hostContainer() {\n return document.getElementById(this.containerId);\n }\n\n componentDidLoad() {\n if (!document.getElementById(this.containerId)) {\n const toastContainer = document.createElement('div');\n toastContainer.id = this.containerId;\n toastContainer.classList.add(this.containerClass);\n toastContainer.classList.add(\n `${this.PREFIX_POSITION_CLASS}${this.position}`\n );\n document.body.appendChild(toastContainer);\n }\n }\n\n @Watch('position')\n onPositionChange(newPosition: string, oldPosition: string) {\n const toastContainer = document.getElementById(this.containerId);\n toastContainer.classList.remove(\n `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n );\n toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n }\n\n /*\n Display a toast message\n * @param config\n */\n @Method()\n async showToast(config: ToastConfig) {\n const toast = document.createElement('ix-toast');\n\n const onClose = new TypedEvent<any \| undefined>();\n\n function removeToast(result?: any) {\n toast.remove();\n onClose.emit(result);\n }\n\n toast.toastTitle = config.title;\n toast.type = config.type;\n toast.autoClose = config.autoClose;\n toast.autoCloseDelay = config.autoCloseDelay;\n toast.icon = config.icon;\n toast.iconColor = config.iconColor;\n toast.addEventListener(\n 'closeToast',\n (event: CustomEvent<any \| undefined>) => {\n const { detail } = event;\n removeToast(detail);\n }\n );\n\n if (typeof config.message === 'string') {\n toast.innerText = config.message;\n } else {\n toast.appendChild(config.message);\n }\n\n this.hostContainer.appendChild(toast);\n\n return {\n onClose,\n close: (result?: any) => {\n removeToast(result);\n },\n };\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"]}

package/dist/collection/components/toast/toast.css CHANGED Viewed

@@ -18,6 +18,22 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -48,6 +64,11 @@
   box-shadow: var(--theme-toast--box-shadow);
   --animate-duration: 300ms;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
 :host .toast-body {
   display: flex;
   position: relative;
@@ -70,8 +91,24 @@
       );
   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;

package/dist/collection/components/toast/toast.js CHANGED Viewed

@@ -36,8 +36,8 @@ export class Toast {
     }
   }
   close() {
-    if (this.host) {
-      this.host.classList.add('animate__fadeOut');
+    if (this.hostElement) {
+      this.hostElement.classList.add('animate__fadeOut');
     }
     setTimeout(() => {
       this.closeToast.emit();
@@ -55,7 +55,7 @@ export class Toast {
         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 text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, 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.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) {
@@ -64,7 +64,7 @@ export class Toast {
       } })) : null));
   }
   static get is() { return "ix-toast"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["toast.scss"]
@@ -213,6 +213,6 @@ export class Toast {
         }
       }];
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=toast.js.map