npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.1 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.1

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 (1549) hide show

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

@@ -1,16 +1,19 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as luxon } from './luxon.js';
-import { d as defineCustomElement$4 } from './button.js';
-import { d as defineCustomElement$3 } from './date-time-card.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './icon-button.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 = ".header.sc-ix-time-picker{display:flex;align-items:center;justify-content:center}.title.sc-ix-time-picker{display:flex;align-items:center;font:var(--theme-text-default-title);min-height:2.5rem;color:var(--theme-datepicker-time-header--color)}.clock.sc-ix-time-picker{height:100%;display:flex;justify-content:center;align-items:center;padding:5rem 0}input.sc-ix-time-picker,.time-reference.sc-ix-time-picker{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.5rem;margin-bottom:0.5rem}input.sc-ix-time-picker::-webkit-outer-spin-button,input.sc-ix-time-picker::-webkit-inner-spin-button,.time-reference.sc-ix-time-picker::-webkit-outer-spin-button,.time-reference.sc-ix-time-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}input[type=number].sc-ix-time-picker,.time-reference[type=number].sc-ix-time-picker{-moz-appearance:textfield}.form-control[type=number].sc-ix-time-picker{text-align:center}.columns.sc-ix-time-picker{display:flex;flex-direction:column;align-items:center;justify-content:space-around}.column-seperator.sc-ix-time-picker{display:flex;align-items:center;margin:0 0.25rem}.button.sc-ix-time-picker{display:flex;justify-content:flex-end}.default-space.sc-ix-time-picker{margin-left:1rem}.text-align.sc-ix-time-picker{text-align:center}.hidden.sc-ix-time-picker{display:none}.time-reference.sc-ix-time-picker{margin:0.75rem 0}";
+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();
@@ -182,15 +185,14 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     }
     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("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)))));
+      } }, 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)))));
   }
-  get hostElement() { return this; }
   static get style() { return timePickerCss; }
-}, [2, "ix-time-picker", {
+}, [1, "ix-time-picker", {
     "format": [1],
     "corners": [1],
     "individual": [4],
@@ -211,7 +213,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-time-picker", "ix-button", "ix-date-time-card", "ix-icon", "ix-icon-button"];
+  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)) {
@@ -220,20 +222,30 @@ function defineCustomElement() {
       break;
     case "ix-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
       }
       break;
     case "ix-date-time-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
       }
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        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();
       }

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

	@@ -1 +1 @@
1	- {"file":"time-picker.js","mappings":"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","names":["DateTime"],"sources":["./src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=scoped","./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\n.header {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.title {\n display: flex;\n align-items: center;\n font: var(--theme-text-default-title);\n min-height: $large-control-height;\n color: var(--theme-datepicker-time-header--color);\n}\n\n.clock {\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5rem 0;\n}\n\ninput,\n.time-reference {\n width: 2.625rem;\n height: $large-space;\n text-align: center;\n margin-top: $small-space;\n margin-bottom: $small-space;\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\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: $medium-space 0;\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 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"],"version":3}
1	+ {"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 CHANGED Viewed

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './icon-button.js';
+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 = ".sc-ix-toast-h{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}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{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}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
+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;
@@ -36,8 +38,8 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     }
   }
   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 +57,7 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         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) {
@@ -63,9 +65,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         }
       } })) : null));
   }
-  get host() { return this; }
+  get hostElement() { return this; }
   static get style() { return toastCss; }
-}, [6, "ix-toast", {
+}, [1, "ix-toast", {
     "type": [1],
     "toastTitle": [1, "toast-title"],
     "autoCloseDelay": [2, "auto-close-delay"],
@@ -79,7 +81,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-toast", "ix-icon", "ix-icon-button"];
+  const components = ["ix-toast", "ix-icon", "ix-icon-button", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-toast":
       if (!customElements.get(tagName)) {
@@ -88,10 +90,15 @@ function defineCustomElement() {
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

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

	@@ -1 +1 @@
1	- {"file":"toast.js","mappings":"~~;;;;~~AAAA,MAAM,QAAQ,GAAG,~~83CAA83C~~;;~~MC0Bl4C~~,KAAK~~;;;;;~~gBAIU,MAAM;;0BAUP,IAAI;qBAKT,IAAI;;;oBAiBJ,CAAC;mBACF,KAAK;;EAIhB,OAAO;IACb,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CAAC;KACtE;IAED,QAAQ,IAAI,CAAC,IAAI;MACf,KAAK,MAAM;QACT,OAAO,eAAS,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAG,CAAC;MAEpE,KAAK,OAAO;QACV,OAAO,eAAS,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,aAAa,GAAG,CAAC;MAElE,KAAK,SAAS;QACZ,OAAO,eAAS,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,GAAG,CAAC;MAEtE,KAAK,SAAS;QACZ,OAAO,eAAS,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,eAAe,GAAG,CAAC;MAEtE;QACE,OAAO,EAAE,CAAC;KACb;GACF;EAEO,KAAK;IACX,IAAI,IAAI,CAAC,~~IAAI~~,EAAE;~~MACb~~,IAAI,CAAC,~~IAAI~~,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;~~KAC7C~~;IACD,UAAU,CAAC;MACT,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB,EAAE,GAAG,CAAC,CAAC;GACT;EAED,MAAM;IACJ,IAAI,gBAAgB,GAA2B,EAAE,CAAC;IAElD,MAAM,gBAAgB,GAAG,CAAC,oBAAoB,CAAC,CAAC;IAEhD,gBAAgB,GAAG;MACjB,iBAAiB,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI;MAC7C,kBAAkB,EAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,SAAS;KACxD,CAAC;IAEF,gBAAgB,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;IAEtD,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,mCAAmC,IAC7C,WACE,KAAK,EAAC,YAAY,EAClB,cAAc,EAAE;QACd,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;OACtB,EACD,cAAc,EAAE;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;OACrB,IAEA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IACrB,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,OAAO,EAAE,CAAO,IAC5C,IAAI,EACR,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,~~uCAAuC~~,~~IAC/C~~,IAAI,CAAC,UAAU,~~CACZ~~,~~IACJ~~,IAAI,EACR,WAAK,KAAK,EAAC,~~4BAA4B~~,~~IACrC~~,eAAa,CACT,CACF,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,sBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,EACT,KAAK,QACL,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,GACrC,CACE,CACF,EACL,IAAI,CAAC,SAAS,IACb,WACE,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,EACjC,KAAK,EAAE,gBAAgB,EACvB,cAAc,EAAE;QACd,IAAI,CAAC,KAAK,EAAE,CAAC;OACd,EACD,eAAe,EAAE;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,EAAE;UACvB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;OACF,GACI,IACL,IAAI,CACH,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=~~scoped~~","./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\n:host {\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-message {\n min-width: 0;\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 ~~scoped~~: 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() ~~host~~!: 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.~~host~~) {\n this.~~host~~.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 ~~text-default-title-single~~\"~~>\n~~ {this.toastTitle}\n </div>\n ) : null}\n <div class=\"toast-message ~~text-default~~\">\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}
1	+ {"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 CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.js';
-const treeItemCss = ".sc-ix-tree-item-h{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected).hover,.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected):hover{background-color:var(--theme-tree-item--background--hover)}.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected).active,.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected):active{background-color:var(--theme-tree-item--background--active)}.selected.sc-ix-tree-item-h{background-color:var(--theme-tree-item--background--selected)}.selected.hover.sc-ix-tree-item-h,.selected.sc-ix-tree-item-h:hover{background-color:var(--theme-tree-item--background--selected-hover)}.selected.active.sc-ix-tree-item-h,.selected.sc-ix-tree-item-h:active{background-color:var(--theme-tree-item--background--selected-active)}.sc-ix-tree-item-h .tree-node-container.sc-ix-tree-item{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item ix-icon.sc-ix-tree-item{transition:transform 150ms ease-in-out}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item ix-icon.icon-toggle-down.sc-ix-tree-item{transform:rotate(90deg)}";
+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;
@@ -27,7 +28,7 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class TreeItem extends HTMLEle
       } }, this.text, h("slot", null))));
   }
   static get style() { return treeItemCss; }
-}, [6, "ix-tree-item", {
+}, [1, "ix-tree-item", {
     "text": [1],
     "hasChildren": [4, "has-children"],
     "context": [16]

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

	@@ -1 +1 @@
1	- {"file":"tree-item.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,~~w1CAAw1C~~;;~~MCiB/1C~~,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=~~scoped~~","./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 '~~mixins/hover';\n@import '~~common-variables';\n@import 'mixins/~~hover~~';\n@import 'mixins/~~text~~-~~truncation~~';\n\n:host {\n display: flex;\n align-items: center;\n\n height: 32px;\n width: 100%;\n\n cursor: pointer;\n\n &:not(.disabled):not(:disabled):not(.selected) ~~{\n &.~~hover,\n &:hover {\n background-color: var(--theme-tree-item--background--hover);\n }\n\n &.active,\n &:active {\n background-color: var(--theme-tree-item--background--active);\n }\n }\n~~\n &.~~selected {\n background-color: var(--theme-tree-item--background--selected);\n\n &.hover,\n &:hover {\n background-color: var(--theme-tree-item--background--selected-hover);\n }\n\n &.active,\n &:active {\n background-color: var(--theme-tree-item--background--selected-active);\n }\n }\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 * 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 ~~scoped~~: 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}
1	+ {"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/typography.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 const VariantsMapping = {
   'x-small': 'text-xs',
@@ -15,31 +15,47 @@ const VariantsMapping = {
   'default-title-single': 'text-default-title-single',
 };
-const typographyCss = ":host .text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}:host .text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host .text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}:host .text-default{-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 .text-default-single{-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.143em;color:var(--theme-color-std-text)}:host .text-default-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.429em;color:var(--theme-color-std-text)}:host .text-default-title-single{-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 .text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host .text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}:host .text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}:host .text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}:host .text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}";
+const typographyCss = ".typography-label,:host(.typography-label){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-sm);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}.typography-label-xs,:host(.typography-label-xs){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--2);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-label-sm,:host(.typography-label-sm){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--1);line-height:var(--theme-line-height-sm);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}.typography-label-lg,:host(.typography-label-lg){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-1);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body,:host(.typography-body){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}.typography-body-xs,:host(.typography-body-xs){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--2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xxl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-body-sm,:host(.typography-body-sm){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--1);line-height:var(--theme-line-height-lg);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}.typography-body-lg,:host(.typography-body-lg){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display,:host(.typography-display){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-3);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xs,:host(.typography-display-xs){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-1);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-sm,:host(.typography-display-sm){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-2);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-lg,:host(.typography-display-lg){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-4);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xl,:host(.typography-display-xl){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-5);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-display-xxl,:host(.typography-display-xxl){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-6);line-height:var(--theme-line-height-xs);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-sm);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h6,.typography-h6,:host(.typography-h6){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h5,.typography-h5,:host(.typography-h5){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-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h4,.typography-h4,:host(.typography-h4){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-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h3,.typography-h3,:host(.typography-h3){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-2);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-lg);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h2,.typography-h2,:host(.typography-h2){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-3);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}h1,.typography-h1,:host(.typography-h1){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-4);line-height:var(--theme-line-height-sm);font-weight:var(--theme-font-weight-bold);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code,:host(.typography-code){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-lg,:host(.typography-code-lg){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-1);line-height:var(--theme-line-height-lg);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-md);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.typography-code-sm,:host(.typography-code-sm){font-feature-settings:\"clig\" off, \"liga\" off;font-family:JetBrainsMono, Courier New, monospace, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms--1);line-height:var(--theme-line-height-lg);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}.typography-decoration-none,:host(.typography-decoration-none){text-decoration:none !important}.typography-decoration-underline,:host(.typography-decoration-underline){text-decoration:underline !important}.typography-decoration-line-through,:host(.typography-decoration-line-through){text-decoration:line-through !important}.typography-weight-bold,:host(.typography-weight-bold){font-weight:700 !important}a{color:var(--theme-color-primary)}:host{display:block;position:relative}: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(.text-xs){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}:host(.text-s){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-caption){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-caption-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}:host(.text-default){-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(.text-default-single){-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.143em;color:var(--theme-color-std-text)}:host(.text-default-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.429em;color:var(--theme-color-std-text)}:host(.text-default-title-single){-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(.text-l){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-l-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}:host(.text-l-title){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host(.text-l-title-single){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}:host(.text-h2){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}:host(.text-xl){-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}";
 const IxTypography = /*@__PURE__*/ proxyCustomElement(class IxTypography extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.variant = 'default';
+    this.variant = undefined;
+    this.format = undefined;
     this.color = undefined;
+    this.bold = false;
+    this.textDecoration = 'none';
   }
   render() {
-    const typographyClass = {
-      [VariantsMapping[this.variant]]: true,
-    };
-    const fontColor = this.color !== undefined
-      ? `var(--theme-color-${this.color}-text)`
-      : 'inherit';
-    return (h("div", { class: typographyClass, style: {
-        color: fontColor,
-      } }, h("slot", null)));
+    var _a, _b;
+    let typographyClass = {};
+    if (this.variant) {
+      typographyClass[VariantsMapping[(_a = this.variant) !== null && _a !== void 0 ? _a : 'default']] = true;
+    }
+    else {
+      typographyClass[`typography-${(_b = this.format) !== null && _b !== void 0 ? _b : 'body'}`] = true;
+    }
+    if (this.textDecoration !== 'none') {
+      typographyClass[`typography-decoration-${this.textDecoration}`] = true;
+    }
+    typographyClass['typography-weight-bold'] = this.bold;
+    let style = {};
+    if (this.color) {
+      style = {
+        color: `var(--theme-color-${this.color}-text)`,
+      };
+    }
+    return (h(Host, { class: typographyClass, style: style }, h("slot", null)));
   }
   static get style() { return typographyCss; }
 }, [1, "ix-typography", {
     "variant": [1],
-    "color": [1]
+    "format": [1],
+    "color": [1],
+    "bold": [4],
+    "textDecoration": [1, "text-decoration"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/typography.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"typography.js","mappings":";;AAsBO,MAAM,eAAe,GAAuC;EACjE,SAAS,EAAE,SAAS;EACpB,KAAK,EAAE,QAAQ;EACf,OAAO,EAAE,cAAc;EACvB,gBAAgB,EAAE,qBAAqB;EACvC,OAAO,EAAE,cAAc;EACvB,gBAAgB,EAAE,qBAAqB;EACvC,KAAK,EAAE,QAAQ;EACf,cAAc,EAAE,eAAe;EAC/B,EAAE,EAAE,SAAS;EACb,eAAe,EAAE,SAAS;EAC1B,eAAe,EAAE,oBAAoB;EACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,~~i6FAAi6F~~;;~~MC+C16F~~,YAAY~~;;;;;mBAIe~~,~~SAAS;;;EAO~~/C,MAAM;IACJ,~~MAAM~~,eAAe,GAAG;~~MACtB~~,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI;~~KACtC~~,CAAC;~~IAEF~~,MAAM,~~SAAS~~,~~GACb~~,IAAI,CAAC,KAAK,KAAK,~~SAAS~~;~~QACpB~~,qBAAqB,IAAI,CAAC,KAAK,QAAQ;~~QACvC~~,~~SAAS,~~CAAC;~~IAEhB~~,QACE,~~WACE~~,KAAK,EAAE,eAAe,~~EACtB~~,KAAK,EAAE~~;QACL~~,KAAK,~~EAAE~~,~~SAAS;OACjB,IAED,~~eAAa,~~CACT~~,~~EACN~~;GACH~~;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/typography/type-mapping.ts","./src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","./src/components/typography/typography.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 /\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'h2'\n \| 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n 'x-small': 'text-xs',\n small: 'text-s',\n caption: 'text-caption',\n 'caption-single': 'text-caption-single',\n default: 'text-default',\n 'default-single': 'text-default-single',\n large: 'text-l',\n 'large-single': 'text-l-single',\n h2: 'text-h2',\n 'display-large': 'text-xl',\n 'default-title': 'text-default-title',\n 'default-title-single': 'text-default-title-single',\n};\n","@import 'common-variables';\n@import 'mixins/fonts';\n\n:host {\n .text-xs {\n @include text-xs;\n }\n\n .text-s {\n @include text-s;\n }\n\n .text-caption {\n @include text-caption;\n }\n\n .text-caption-single {\n @include text-caption-single;\n }\n\n .text-default {\n @include text-default;\n }\n\n .text-default-single {\n @include text-default-single;\n }\n\n .text-default-title {\n @include text-default-title;\n }\n\n .text-default-title-single {\n @include text-default-title-single;\n }\n\n .text-l {\n @include text-l;\n }\n\n .text-l-single {\n @include text-l-single;\n }\n\n .text-l-title {\n @include text-l-title;\n }\n\n .text-l-title-single {\n @include text-l-title-single;\n }\n\n .text-h2 {\n @include text-h2;\n }\n\n .text-xl {\n @include text-xl;\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 { Component, h, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'large-title'\n \| 'large-title-single'\n \| 'h2'\n \| 'display-large';\n\nexport type TypographyColors =\n \| 'contrast'\n \| 'std'\n \| 'soft'\n \| 'weak'\n \| 'inv-contrast'\n \| 'inv-std'\n \| 'inv-soft'\n \| 'inv-weak'\n \| 'alarm';\n\n/\n @~~internal~~\n /\n@Component({\n tag: 'ix-typography',\n styleUrl: 'typography.scss',\n shadow: true,\n})\nexport class IxTypography {\n /\n Font variant based on theme variables\n /\n @Prop() variant: TypographyVariants = ~~'default'~~;\n\n /\n Text color based on theme variables\n */\n @Prop() color: TypographyColors;\n\n render() {\n ~~const~~ typographyClass = {\n [VariantsMapping[this.variant]]: true,\n };\n\n ~~const~~ ~~fontColor~~ =\n this.color ~~!==~~ ~~undefined~~\n ? `var(--theme-color-${this.color}-text)`\n ~~: 'inherit'~~;\n\n return (\n <~~div\n~~ class={typographyClass}\n style={~~{\n color: fontColor,\n~~ }~~}\n~~ >\n <slot></slot>\n </~~div~~>\n );\n }\n}\n"],"version":3}
1	+ {"file":"typography.js","mappings":";;AAsBO,MAAM,eAAe,GAAuC;EACjE,SAAS,EAAE,SAAS;EACpB,KAAK,EAAE,QAAQ;EACf,OAAO,EAAE,cAAc;EACvB,gBAAgB,EAAE,qBAAqB;EACvC,OAAO,EAAE,cAAc;EACvB,gBAAgB,EAAE,qBAAqB;EACvC,KAAK,EAAE,QAAQ;EACf,cAAc,EAAE,eAAe;EAC/B,EAAE,EAAE,SAAS;EACb,eAAe,EAAE,SAAS;EAC1B,eAAe,EAAE,oBAAoB;EACrC,sBAAsB,EAAE,2BAA2B;CACpD;;ACnCD,MAAM,aAAa,GAAG,0rbAA0rb;;MCoEnsb,YAAY;;;;;;;;gBAsBR,KAAK;0BAKqB,MAAM;;EAE/C,MAAM;;IACJ,IAAI,eAAe,GAAG,EAAE,CAAC;IAEzB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,eAAe,CAAC,eAAe,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;KACpE;SAAM;MACL,eAAe,CAAC,cAAc,MAAA,IAAI,CAAC,MAAM,mCAAI,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC;KAC/D;IAED,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;MAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,IAAI,CAAC;KACxE;IAED,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;IAEtD,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,KAAK,GAAG;QACN,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,QAAQ;OAC/C,CAAC;KACH;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,IACxC,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/typography/type-mapping.ts","./src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","./src/components/typography/typography.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 /\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'h2'\n \| 'display-large';\n\nexport const VariantsMapping: Record<TypographyVariants, string> = {\n 'x-small': 'text-xs',\n small: 'text-s',\n caption: 'text-caption',\n 'caption-single': 'text-caption-single',\n default: 'text-default',\n 'default-single': 'text-default-single',\n large: 'text-l',\n 'large-single': 'text-l-single',\n h2: 'text-h2',\n 'display-large': 'text-xl',\n 'default-title': 'text-default-title',\n 'default-title-single': 'text-default-title-single',\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n}\n\n:host(.text-xs) {\n @include text-xs;\n}\n\n:host(.text-s) {\n @include text-s;\n}\n\n:host(.text-caption) {\n @include text-caption;\n}\n\n:host(.text-caption-single) {\n @include text-caption-single;\n}\n\n:host(.text-default) {\n @include text-default;\n}\n\n:host(.text-default-single) {\n @include text-default-single;\n}\n\n:host(.text-default-title) {\n @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n @include text-default-title-single;\n}\n\n:host(.text-l) {\n @include text-l;\n}\n\n:host(.text-l-single) {\n @include text-l-single;\n}\n\n:host(.text-l-title) {\n @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n @include text-l-title-single;\n}\n\n:host(.text-h2) {\n @include text-h2;\n}\n\n:host(.text-xl) {\n @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n :host(.typography-#{$format}) {\n @extend .typography-#{$format};\n }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n :host(.typography-decoration-#{$decoration}) {\n @extend .typography-decoration-#{$decoration};\n }\n}\n\n:host(.typography-weight-bold) {\n @extend .typography-weight-bold;\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, h, Host, Prop } from '@stencil/core';\nimport { VariantsMapping } from './type-mapping';\n\nexport type TypographyVariants =\n \| 'x-small'\n \| 'small'\n \| 'caption'\n \| 'caption-single'\n \| 'default'\n \| 'default-single'\n \| 'default-title'\n \| 'default-title-single'\n \| 'large'\n \| 'large-single'\n \| 'large-title'\n \| 'large-title-single'\n \| 'h2'\n \| 'display-large';\n\nexport type TypographyColors =\n \| 'contrast'\n \| 'std'\n \| 'soft'\n \| 'weak'\n \| 'inv-contrast'\n \| 'inv-std'\n \| 'inv-soft'\n \| 'inv-weak'\n \| 'alarm';\n\ntype TypographyFormatLabel = 'label' \| 'label-xs' \| 'label-sm' \| 'label-lg';\ntype TypographyFormatBody = 'body' \| 'body-xs' \| 'body-sm' \| 'body-lg';\ntype TypographyFormatDisplay =\n \| 'display'\n \| 'display-xs'\n \| 'display-sm'\n \| 'display-lg'\n \| 'display-xl'\n \| 'display-xxl';\ntype TypographyFormatHeading = 'h6' \| 'h5' \| 'h4' \| 'h3' \| 'h2' \| 'h1';\ntype TypographyFormatCode = 'code' \| 'code-sm' \| 'code-lg';\n\nexport type TypographyFormat =\n \| TypographyFormatLabel\n \| TypographyFormatBody\n \| TypographyFormatDisplay\n \| TypographyFormatHeading\n \| TypographyFormatCode;\n\nexport type TextDecoration = 'none' \| 'underline' \| 'line-through';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-typography',\n styleUrl: 'typography.scss',\n shadow: true,\n})\nexport class IxTypography {\n /\n Font variant based on theme variables\n \n @deprecated Use `format` property\n * @internal\n /\n @Prop() variant: TypographyVariants;\n\n /\n Text format\n /\n @Prop() format: TypographyFormat;\n\n /\n Text color based on theme variables\n /\n @Prop() color: TypographyColors;\n\n /\n Display text bold\n /\n @Prop() bold = false;\n\n /\n Text decoration\n */\n @Prop() textDecoration: TextDecoration = 'none';\n\n render() {\n let typographyClass = {};\n\n if (this.variant) {\n typographyClass[VariantsMapping[this.variant ?? 'default']] = true;\n } else {\n typographyClass[`typography-${this.format ?? 'body'}`] = true;\n }\n\n if (this.textDecoration !== 'none') {\n typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n }\n\n typographyClass['typography-weight-bold'] = this.bold;\n\n let style = {};\n\n if (this.color) {\n style = {\n color: `var(--theme-color-${this.color}-text)`,\n };\n }\n\n return (\n <Host class={typographyClass} style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}