@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/siemens-ix/p-6d38bed7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","numberToPixel","value","tooltipInstance","Tooltip","constructor","hostRef","this","interactive","placement","showDelay","hideDelay","animationFrame","visible","instance","dialogRef","makeRef","arrowElement","hostElement","shadowRoot","querySelector","showTooltip","anchorElement","clearTimeouts","showTooltipTimeout","visibleFor","dialog","waitForCurrent","setTimeout","setAnchorElement","showPopover","applyTooltipPosition","registerTooltipListener","hideTooltip","hideTooltipTimeout","hidePopover","_a","disposeAutoUpdate","call","_b","disposeTooltipListener","undefined","computeArrowPosition","middlewareData","x","y","arrow","resetPosition","top","right","bottom","left","startsWith","Object","assign","computeTooltipPosition","target","computePosition","strategy","middleware","shift","offset","element","flip","fallbackStrategy","fallbackAxisSideDirection","padding","hide","applyTooltipArrowPosition","computeResponse","arrowPosition","style","Promise","resolve","autoUpdate","async","isHidden","referenceHidden","ancestorResize","ancestorScroll","elementResize","queryAnchorElements","for","Array","isArray","resolveElements","references","elements","all","map","reference","resolvedElements","resolveSelector","push","HTMLElement","registerTriggerListener","disposeTriggerListener","triggerElementList","listeners","forEach","eventType","callback","addDisposableEventListenerAsArray","clearHideTimeout","event","stopPropagation","document","key","registerDomChangeListener","observer","MutationObserver","observe","body","attributes","attributeFilter","childList","subtree","disposeDomChangeListener","disconnect","clearTimeout","clearShowTimeout","componentWillLoad","componentDidLoad","disconnectedCallback","_c","_d","render","h","Host","role","class","ref","id","popover","inert","name","format","titleContent"],"sources":["src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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.dialog {\n  margin: 0;\n  padding: 0;\n  border: none;\n  max-width: 18.25rem;\n  width: max-content;\n  background-color: transparent;\n  overflow-wrap: break-word;\n  box-shadow: none;\n  overflow: visible;\n}\n\n.tooltip-container {\n  display: block;\n  position: relative;\n  width: auto;\n  height: 100%;\n  background: var(--theme-tootlip--background);\n  color: var(--theme-color-std-text);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n  border-radius: 0.25rem;\n}\n\n.content-wrapper {\n  overflow: auto;\n}\n\n.tooltip-title {\n  display: flex;\n  align-items: center;\n\n  ::slotted(ix-icon) {\n    margin-right: 0.35rem;\n  }\n}\n\n.arrow,\n.arrow::before {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: inherit;\n}\n\n.arrow {\n  visibility: hidden;\n}\n\n.arrow::before {\n  visibility: visible;\n  content: '';\n  transform: rotate(45deg);\n  background-color: var(--theme-tootlip--background);\n}\n","/*\n * SPDX-FileCopyrightText: 2025 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  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveSelector } from '../utils/find-element';\nimport { ElementReference } from 'src/components';\nimport { makeRef } from '../utils/make-ref';\nimport { addDisposableEventListenerAsArray } from '../utils/disposable-event-listener';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value?: number | null) =>\n  value !== null ? `${value}px` : '';\n\nlet tooltipInstance = 0;\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for?: ElementReference | ElementReference[];\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent?: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip.\n   * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /** @internal */\n  @Prop() showDelay = 0;\n\n  /** @internal */\n  @Prop() hideDelay = 50;\n\n  /** @internal */\n  @Prop() animationFrame = false;\n\n  @Element() hostElement!: HTMLIxTooltipElement;\n\n  @State() private visible = false;\n\n  private hideTooltipTimeout?: NodeJS.Timeout;\n  private showTooltipTimeout?: NodeJS.Timeout;\n  private visibleFor?: Element;\n\n  private disposeAutoUpdate?: () => void;\n  private disposeTriggerListener?: () => void;\n  private disposeTooltipListener?: () => void;\n  private disposeDomChangeListener?: () => void;\n\n  private readonly instance = tooltipInstance++;\n\n  private readonly dialogRef = makeRef<HTMLDialogElement>();\n\n  private get arrowElement(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('.arrow')!;\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: Element) {\n    this.clearTimeouts();\n\n    if (this.showTooltipTimeout || this.visibleFor === anchorElement) {\n      return;\n    }\n\n    const dialog = await this.dialogRef.waitForCurrent();\n\n    this.showTooltipTimeout = setTimeout(() => {\n      this.setAnchorElement(anchorElement);\n      dialog.showPopover();\n      this.applyTooltipPosition(anchorElement, dialog);\n      this.registerTooltipListener(dialog);\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip(hideDelay: number = this.hideDelay) {\n    this.clearTimeouts();\n\n    if (this.hideTooltipTimeout || !this.visible) {\n      return;\n    }\n\n    if (this.interactive && hideDelay === 50) {\n      hideDelay = 150;\n    }\n\n    const dialog = await this.dialogRef.waitForCurrent();\n\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.setAnchorElement();\n      dialog.hidePopover();\n      this.disposeAutoUpdate?.();\n      this.disposeTooltipListener?.();\n    }, hideDelay);\n  }\n\n  private setAnchorElement(anchorElement?: Element) {\n    if (!anchorElement) {\n      this.visibleFor = undefined;\n      this.visible = false;\n    } else {\n      this.visibleFor = anchorElement;\n      this.visible = true;\n    }\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition | undefined {\n    let { x, y } = middlewareData.arrow!;\n    const resetPosition = {\n      top: 'unset',\n      right: 'unset',\n      bottom: 'unset',\n      left: 'unset',\n    };\n\n    if (placement.startsWith('top')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(x),\n        top: numberToPixel(-6),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        ...resetPosition,\n        right: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(\n    target: Element,\n    dialog: HTMLDialogElement\n  ): Promise<ComputePositionReturn> {\n    return computePosition(target, dialog, {\n      strategy: 'fixed',\n      placement: this.placement,\n      middleware: [\n        shift(),\n        offset(12),\n        arrow({\n          element: this.arrowElement,\n        }),\n        flip({\n          fallbackStrategy: 'initialPlacement',\n          fallbackAxisSideDirection: 'end',\n          padding: 10,\n        }),\n        hide(),\n      ],\n    });\n  }\n\n  private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n    const arrowPosition = this.computeArrowPosition(computeResponse);\n    Object.assign(this.arrowElement.style, arrowPosition);\n  }\n\n  private async applyTooltipPosition(\n    target: Element,\n    dialog: HTMLDialogElement\n  ): Promise<ComputePositionReturn | undefined> {\n    if (!target) {\n      return;\n    }\n\n    return new Promise<ComputePositionReturn>((resolve) => {\n      this.disposeAutoUpdate?.();\n\n      this.disposeAutoUpdate = autoUpdate(\n        target,\n        dialog,\n        async () => {\n          const computeResponse = await this.computeTooltipPosition(\n            target,\n            dialog\n          );\n\n          const isHidden = computeResponse.middlewareData.hide?.referenceHidden;\n\n          if (isHidden) {\n            this.hideTooltip(0);\n            resolve(computeResponse);\n          }\n\n          if (computeResponse.middlewareData.arrow) {\n            this.applyTooltipArrowPosition(computeResponse);\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(dialog.style, {\n            left: numberToPixel(x),\n            top: numberToPixel(y),\n          });\n\n          resolve(computeResponse);\n        },\n        {\n          ancestorResize: true,\n          ancestorScroll: true,\n          elementResize: true,\n          animationFrame: this.animationFrame,\n        }\n      );\n    });\n  }\n\n  private async queryAnchorElements(): Promise<HTMLElement[] | undefined> {\n    if (this.for) {\n      if (Array.isArray(this.for)) {\n        return this.resolveElements(this.for);\n      } else {\n        return this.resolveElements([this.for]);\n      }\n    }\n  }\n\n  private async resolveElements(\n    references: ElementReference[]\n  ): Promise<HTMLElement[]> {\n    const elements: HTMLElement[] = [];\n\n    await Promise.all(\n      references.map(async (reference) => {\n        if (typeof reference === 'string') {\n          const resolvedElements = await resolveSelector(\n            reference,\n            this.hostElement\n          );\n\n          if (resolvedElements) {\n            elements.push(...resolvedElements);\n          }\n        } else if (reference instanceof HTMLElement) {\n          elements.push(reference);\n        } else if (reference instanceof Promise) {\n          elements.push(await reference);\n        }\n      })\n    );\n\n    return elements;\n  }\n\n  private async registerTriggerListener() {\n    this.disposeTriggerListener?.();\n\n    const triggerElementList = await this.queryAnchorElements();\n\n    if (!triggerElementList) {\n      return;\n    }\n\n    const listeners: {\n      element: Element | Window | Document;\n      eventType: string;\n      callback: EventListenerOrEventListenerObject;\n    }[] = [];\n\n    triggerElementList.forEach((element) => {\n      listeners.push(\n        ...[\n          {\n            element: element,\n            eventType: 'mouseenter',\n            callback: () => {\n              this.showTooltip(element);\n            },\n          },\n          {\n            element: element,\n            eventType: 'mouseleave',\n            callback: () => {\n              this.hideTooltip();\n            },\n          },\n          {\n            element: element,\n            eventType: 'focus',\n            callback: () => {\n              this.showTooltip(element);\n            },\n          },\n          {\n            element: element,\n            eventType: 'focusout',\n            callback: () => {\n              this.hideTooltip();\n            },\n          },\n        ]\n      );\n    });\n\n    this.disposeTriggerListener = addDisposableEventListenerAsArray(listeners);\n  }\n\n  private registerTooltipListener(dialog: HTMLDialogElement) {\n    this.disposeTooltipListener?.();\n\n    this.disposeTooltipListener = addDisposableEventListenerAsArray([\n      {\n        element: dialog,\n        eventType: 'mouseenter',\n        callback: () => {\n          if (this.interactive) {\n            this.clearHideTimeout();\n          }\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'focus',\n        callback: () => {\n          if (this.interactive) {\n            this.clearHideTimeout();\n          }\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'mouseleave',\n        callback: () => {\n          this.hideTooltip();\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'focusout',\n        callback: () => {\n          this.hideTooltip();\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'click',\n        callback: (event: Event) => {\n          event.stopPropagation();\n        },\n      },\n      {\n        element: document,\n        eventType: 'keydown',\n        callback: (event: Event) => {\n          if ((event as KeyboardEvent).key === 'Escape') {\n            this.hideTooltip();\n          }\n        },\n      },\n    ]);\n  }\n\n  private registerDomChangeListener() {\n    const observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.disposeDomChangeListener = () => {\n      observer.disconnect();\n    };\n  }\n\n  private clearHideTimeout() {\n    clearTimeout(this.hideTooltipTimeout);\n    this.hideTooltipTimeout = undefined;\n  }\n\n  private clearShowTimeout() {\n    clearTimeout(this.showTooltipTimeout);\n    this.showTooltipTimeout = undefined;\n  }\n\n  private clearTimeouts() {\n    this.clearHideTimeout();\n    this.clearShowTimeout();\n  }\n\n  componentWillLoad() {\n    this.registerTriggerListener();\n  }\n\n  componentDidLoad() {\n    this.registerDomChangeListener();\n  }\n\n  disconnectedCallback() {\n    this.clearTimeouts();\n\n    this.disposeAutoUpdate?.();\n    this.disposeTriggerListener?.();\n    this.disposeTooltipListener?.();\n    this.disposeDomChangeListener?.();\n  }\n\n  render() {\n    return (\n      <Host role=\"tooltip\" class={{ visible: this.visible }}>\n        <dialog\n          ref={this.dialogRef}\n          id={'tooltip-' + this.instance}\n          class=\"dialog\"\n          popover=\"manual\"\n          inert={!this.visible}\n        >\n          <div class=\"tooltip-container\">\n            <div class=\"content-wrapper\">\n              <div class={'tooltip-title'}>\n                <slot name=\"title-icon\"></slot>\n                <ix-typography format=\"h5\">\n                  {this.titleContent}\n                  <slot name=\"title-content\"></slot>\n                </ix-typography>\n              </div>\n              <slot></slot>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-718a54f8.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as a,g as c}from"./p-DtF9fwpD.js";const e=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;cursor:pointer;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius);overflow:hidden}:host .card-content-wrapper{height:100%;width:100%;box-sizing:border-box}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-outline){--ix-card-background:var(--theme-color-ghost);--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-outline) ::slotted(ix-card-accordion){color:var(--theme-color-primary)}:host(.card-filled){--ix-card-background:var(--theme-color-component-1)}:host(.card-filled) ::slotted(ix-card-accordion){color:var(--theme-color-primary)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight,.card-outline)){--ix-card-border-color:transparent}:host(.card-insight:hover),:host(.card-outline:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover),:host(.card-filled:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active),:host(.card-outline:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active),:host(.card-filled:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight),:host(.selected.card-outline){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification),:host(.selected.card-filled){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";const t=class{constructor(o){r(this,o);this.variant="outline";this.selected=false}render(){return o(a,{key:"7d36825ad469c0a2453fb72dbf7f079458c2a2f1",class:{selected:this.selected,[`card-${this.variant}`]:true}},o("div",{key:"3a6186d515640d60fb7b3c4898c268bd6cf15c21",class:"card-content"},o("slot",{key:"d9fb872de9eb038fc0f02ba30458506f0b821784"})),o("div",{key:"2b1214fe85a418875accd6927bd1ca0b0f388dd5",class:"card-footer"},o("slot",{key:"ba68b648ad8c7d95a77d1b819f98957b43a0d663",name:"card-accordion"})))}get hostElement(){return c(this)}};t.style=e;const d=":host{display:flex;padding:1rem;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .content-wrapper{box-sizing:border-box;height:100%;width:100%;overflow:hidden;gap:0.5rem;display:flex;flex-direction:column;align-items:flex-start}";const i=class{constructor(o){r(this,o)}render(){return o(a,{key:"b158a08d7ca4779af659d4fa143e047dba41088e"},o("div",{key:"abd538339ad50ba6430c834eb1283c20788d78e2",class:"content-wrapper"},o("slot",{key:"86494d2878e0cb36e417a5d5868fff7f551b4de7"})))}};i.style=d;export{t as ix_card,i as ix_card_content};
+//# sourceMappingURL=p-718a54f8.entry.js.map

package/dist/siemens-ix/p-718a54f8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","Card","constructor","hostRef","this","variant","selected","render","h","Host","key","class","name","cardContentCss","CardContent"],"sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n  cursor: pointer;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n    overflow: hidden;\n  }\n\n  .card-content-wrapper {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n@mixin accordionChevronColorPrimary {\n  ::slotted(ix-card-accordion) {\n    color: var(--theme-color-primary);\n  }\n}\n\n:host(.card-outline) {\n  @include accordionChevronColorPrimary;\n\n  --ix-card-background: var(--theme-color-ghost);\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-filled) {\n  @include accordionChevronColorPrimary;\n\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n  --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n  --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n  --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n  --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n  --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n  --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n  --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n  --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n  --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n  --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n  --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n  --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n  --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement!: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'outline';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 1rem;\n  height: 100%;\n  overflow: hidden;\n\n  .content-wrapper {\n    box-sizing: border-box;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    gap: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <div class=\"content-wrapper\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAU,kjK,MCqBHC,EAAI,MALjB,WAAAC,CAAAC,G,UAWUC,KAAOC,QAAgB,UAKvBD,KAAQE,SAAY,KAmB7B,CAjBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLL,SAAUF,KAAKE,SACf,CAAC,QAAQF,KAAKC,WAAY,OAG5BG,EAAK,OAAAE,IAAA,2CAAAC,MAAM,gBACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAK,OAAAE,IAAA,2CAAAC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,oB,8CC9CrB,MAAMC,EAAiB,g9B,MCUVC,EAAW,M,yBACtB,MAAAP,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAK,OAAAE,IAAA,2CAAAC,MAAM,mBACTH,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/siemens-ix/p-71eaa791.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as e}from"./p-DtF9fwpD.js";const o=":host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}";const c=class{constructor(s){t(this,s)}render(){const t={};t["grid-area"]=this.itemName;return s(e,{key:"bc5b71e095a35738800e7b95baca2c4a7874205e",style:t},s("slot",{key:"dd2a9bc3a5eecc1d539820a72dd9de51e5466923"}))}};c.style=o;export{c as ix_css_grid_item};
+//# sourceMappingURL=p-71eaa791.entry.js.map

package/dist/siemens-ix/p-71eaa791.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cssGridItemCss","CssGridItem","render","style","this","itemName","h","Host","key"],"sources":["src/components/css-grid/css-grid-item.scss?tag=ix-css-grid-item&encapsulation=shadow","src/components/css-grid/css-grid-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:host {\n  display: block;\n  position: relative;\n\n  ::slotted(*) {\n    height: 100%;\n    width: 100%;\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, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid-item',\n  styleUrl: 'css-grid-item.scss',\n  shadow: true,\n})\nexport class CssGridItem {\n  /**\n   * Grid item name\n   */\n  @Prop() itemName!: string;\n\n  render() {\n    const style: Record<string, string> = {};\n    style['grid-area'] = this.itemName;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,mF,MCmBVC,EAAW,M,yBAMtB,MAAAC,GACE,MAAMC,EAAgC,GACtCA,EAAM,aAAeC,KAAKC,SAE1B,OACEC,EAACC,EAAK,CAAAC,IAAA,2CAAAL,MAAOA,GACXG,EAAa,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/siemens-ix/p-736a7446.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o}from"./p-DtF9fwpD.js";const n='.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,.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,.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,.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,.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,.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,.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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 i=class{constructor(e){t(this,e);this.bold=false;this.textDecoration="none"}render(){var t;let n={};n[`typography-${(t=this.format)!==null&&t!==void 0?t:"body"}`]=true;if(this.textDecoration!=="none"){n[`typography-decoration-${this.textDecoration}`]=true}n["typography-weight-bold"]=this.bold;let i={};if(this.textColor){i={color:`var(--theme-color-${this.textColor}-text)`}}return e(o,{key:"09495783bef6449f7a5a70f12f5dd4e4886a9e07",class:n,style:i},e("slot",{key:"902b34b3839cc4868ad65b61f1398bf93eedec17"}))}};i.style=n;export{i as ix_typography};
+//# sourceMappingURL=p-736a7446.entry.js.map

package/dist/siemens-ix/p-736a7446.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["typographyCss","IxTypography","constructor","hostRef","this","bold","textDecoration","render","typographyClass","_a","format","style","textColor","color","h","Host","key","class"],"sources":["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 */\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';\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   * Text format\n   */\n  @Prop() format?: TypographyFormat;\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() textColor?: 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: Record<string, boolean> = {};\n    typographyClass[`typography-${this.format ?? 'body'}`] = true;\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.textColor) {\n      style = {\n        color: `var(--theme-color-${this.textColor}-text)`,\n      };\n    }\n\n    return (\n      <Host class={typographyClass} style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,oxb,MCmETC,EAAY,MALzB,WAAAC,CAAAC,G,UAmBUC,KAAIC,KAAG,MAKPD,KAAcE,eAAmB,MA0B1C,CAxBC,MAAAC,G,MACE,IAAIC,EAA2C,GAC/CA,EAAgB,eAAcC,EAAAL,KAAKM,UAAU,MAAAD,SAAA,EAAAA,EAAA,UAAY,KAEzD,GAAIL,KAAKE,iBAAmB,OAAQ,CAClCE,EAAgB,yBAAyBJ,KAAKE,kBAAoB,I,CAGpEE,EAAgB,0BAA4BJ,KAAKC,KAEjD,IAAIM,EAAQ,GAEZ,GAAIP,KAAKQ,UAAW,CAClBD,EAAQ,CACNE,MAAO,qBAAqBT,KAAKQ,kB,CAIrC,OACEE,EAACC,EAAK,CAAAC,IAAA,2CAAAC,MAAOT,EAAiBG,MAAOA,GACnCG,EAAa,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/siemens-ix/p-765ffc2a.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as t,H as r}from"./p-DtF9fwpD.js";import{D as n}from"./p-bDicGJUN.js";import{L as a,q as i,M as l,h as d}from"./p-CrTP-icT.js";const s='input{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:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;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[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{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:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;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[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;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-radius:0;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:none;border-radius:0;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;height:3.25rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:block;position:relative;width:21rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .ix-form-control,:host .ix-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);padding-inline-start:0.5rem;padding-inline-end:0.5rem}:host .ix-form-control::-moz-placeholder,:host .ix-form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}:host .ix-form-control::placeholder,:host .ix-form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}:host .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .ix-form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .ix-form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .ix-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 .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .ix-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 .ix-form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .ix-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 .ix-form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .ix-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 .ix-form-control:focus-visible{color:var(--theme-input--color)}:host .ix-form-control[type=number]{text-align:right}:host .ix-form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .ix-form-control.readonly,:host .ix-form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}:host .ix-form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .ix-form-control:read-only,:host .ix-form-control[readonly],:host .ix-form-control[readOnly],:host .ix-form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .ix-form-control:read-only::-moz-placeholder,:host .ix-form-control[readonly]::-moz-placeholder,:host .ix-form-control[readOnly]::-moz-placeholder,:host .ix-form-control.readonly::-moz-placeholder{color:transparent}:host .ix-form-control:-moz-read-only::placeholder{color:transparent}:host .ix-form-control:read-only::placeholder,:host .ix-form-control[readonly]::placeholder,:host .ix-form-control[readOnly]::placeholder,:host .ix-form-control.readonly::placeholder{color:transparent}:host .ix-form-control:disabled,:host .ix-form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start: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 .ix-form-control:disabled::-moz-placeholder,:host .ix-form-control.disabled::-moz-placeholder{color:transparent}:host .ix-form-control:disabled::placeholder,:host .ix-form-control.disabled::placeholder{color:transparent}:host .ix-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;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}:host .input-wrapper>input{padding-inline-start:2.2rem}:host select.ix-form-control{padding:0 0.312rem}:host textarea.ix-form-control{padding:0.375rem 0.5rem}:host input.ix-form-control.disabled,:host input.ix-form-control:disabled{color:var(--theme-input--color--disabled)}:host input.ix-form-control:-moz-read-only{cursor:default}:host input.ix-form-control:read-only,:host input.ix-form-control.readonly{cursor:default}@media (max-width: 576px){:host .clock{padding:1.5rem 0 1rem 0}:host .header{height:1.5rem !important}}@media (min-width: 576px){:host .clock{padding:4.25rem 0 3.75rem 0}:host .header{height:2.5rem !important}}:host .header{display:flex;align-items:center;justify-content:center;height:2.5rem}:host .flex{display:flex}:host .clock{display:flex;justify-content:center;align-items:center}: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 .ix-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 .button.standalone{padding-top:0.5rem}: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 c=class{constructor(t){o(this,t);this.timeSelect=e(this,"timeSelect",7);this.timeChange=e(this,"timeChange",7);this.format="TT";this.corners="rounded";this.standaloneAppearance=true;this.showHour=true;this.showMinutes=true;this.showSeconds=true;this.time=n.now().toFormat(this.format);this.textSelectTime="Done";this.textTime="Time"}watchTimePropHandler(o){this._time=n.fromFormat(o,this.format);if(!this._time.isValid){throw new Error("Format is not supported or not correct")}}componentWillLoad(){this._time=n.fromFormat(this.time,this.format);if(!this._time.isValid){console.error(`Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`);return}this._timeRef=this.format.includes("a")?n.fromFormat(this.time,this.format).toFormat("a"):undefined;this.formatTime()}formatTime(){if(!this._time){return}const[o,e,t]=this._time.toFormat(this.format).split(" ")[0].split(":");this._formattedTime={hour:o,minute:e,second:t}}onInternalTimeChange(){var o,e;this.timeChange.emit((o=this._time)===null||o===void 0?void 0:o.toFormat(this.format));if(this._timeRef)this._timeRef=(e=this._time)===null||e===void 0?void 0:e.toFormat("a")}timeUpdate(o,e){var t;let r=n.now().endOf("day").get(o);if(this._timeRef==="PM"&&o==="hour")e+=12;if(this._timeRef==="AM"&&o==="hour")r=12;if(e>r){e=r}else if(e<0){e=0}this._time=(t=this._time)===null||t===void 0?void 0:t.set({[o]:e});return e}changeTimeReference(){var o,e;this._timeRef=this._timeRef==="AM"?"PM":"AM";if(!((o=this._time)===null||o===void 0?void 0:o.toFormat("a").includes(this._timeRef))){this._time=(e=this._time)===null||e===void 0?void 0:e.plus({hour:12})}}async getCurrentTime(){var o;return(o=this._time)===null||o===void 0?void 0:o.toFormat(this.format)}render(){let o=[{unit:"hour",placeholder:"HH",hidden:!this.showHour},{unit:"minute",placeholder:"MM",hidden:!this.showMinutes},{unit:"second",placeholder:"SS",hidden:!this.showSeconds}];o=o.filter((o=>!o.hidden));return t(r,{key:"3324e541eaee13441527be68f301725504662914"},t("ix-date-time-card",{key:"5cca6cc594555537fabb7559fa772f0108288f02",standaloneAppearance:this.standaloneAppearance,corners:this.corners},t("div",{key:"23dd6dbf7b2ce70d43ac1175e7142732561e4a4c",class:"header",slot:"header"},t("ix-typography",{key:"e3357692be47ce40ed0082febf7d2c0e7ce25749",format:"h5"},this.textTime||"Time")),t("div",{key:"a1b0ccb5870ee7f3bb06ccb0b1d3c24c7df3c892",class:"clock"},o.map(((e,r)=>t("div",{class:"flex"},t("div",{class:{columns:true,hidden:e.hidden}},t("ix-icon-button",{size:"16",onClick:()=>{var o;return this._time=(o=this._time)===null||o===void 0?void 0:o.plus({[e.unit]:1})},ghost:true,icon:a,variant:"primary",class:"arrows"}),t("input",{class:"ix-form-control",name:e.unit,type:"number",placeholder:e.placeholder,value:this._formattedTime?this._formattedTime[e.unit]:"",onKeyDown:o=>{var t;if(o.key!=="ArrowUp"&&o.key!=="ArrowDown")return;const r=o.key==="ArrowUp"?1:-1;this._time=(t=this._time)===null||t===void 0?void 0:t.plus({[e.unit]:r});o.preventDefault()},onChange:o=>{let t=o.target;t.value=this.timeUpdate(e.unit,+t.value).toString()}}),t("ix-icon-button",{size:"16",onClick:()=>{var o;return this._time=(o=this._time)===null||o===void 0?void 0:o.minus({[e.unit]:1})},ghost:true,icon:i,variant:"primary",class:"arrows"})),r!==o.length-1&&t("div",{class:{"column-seperator":true,hidden:e.hidden}},":")))),t("div",{key:"cc807c62c8d7f1a6d4d45c1460cdf5f25afdffd6",class:{columns:true,"default-space":true,hidden:this._timeRef===undefined}},t("ix-icon-button",{key:"80fd8ec8d709cfadff53f09b0d2d047e242568a0",size:"16",onClick:()=>this.changeTimeReference(),ghost:true,icon:l,variant:"primary",class:"arrows"}),t("div",{key:"e7d47e9686c937fc83c614176e0722885d7c2b55",class:"time-reference"},this._timeRef),t("ix-icon-button",{key:"7ca882f6dae9cae2bc180b79eff475a7c1ac944f",size:"16",onClick:()=>this.changeTimeReference(),ghost:true,icon:d,variant:"primary",class:"arrows"}))),t("div",{key:"63e6c67d7116d607b5b5635f7f47dec23978c126",class:{button:true,hidden:!this.standaloneAppearance,standalone:true}},t("ix-button",{key:"382a7d16a98d76b8687d0e84ecf8efaaa21a6d06",onClick:()=>{var o;this.timeSelect.emit((o=this._time)===null||o===void 0?void 0:o.toFormat(this.format))}},this.textSelectTime))))}static get watchers(){return{time:["watchTimePropHandler"],_time:["formatTime","onInternalTimeChange"]}}};c.style=s;export{c as ix_time_picker};
+//# sourceMappingURL=p-765ffc2a.entry.js.map

package/dist/siemens-ix/p-765ffc2a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["timePickerCss","TimePicker","constructor","hostRef","this","format","corners","standaloneAppearance","showHour","showMinutes","showSeconds","time","DateTime","now","toFormat","textSelectTime","textTime","watchTimePropHandler","newValue","_time","fromFormat","isValid","Error","componentWillLoad","console","error","invalidReason","invalidExplanation","_timeRef","includes","undefined","formatTime","hour","minute","second","split","_formattedTime","onInternalTimeChange","timeChange","emit","_a","_b","timeUpdate","unit","value","maxValue","endOf","get","set","changeTimeReference","plus","getCurrentTime","render","timepickerInformation","placeholder","hidden","filter","item","h","Host","key","class","slot","map","descriptor","index","columns","size","onClick","ghost","icon","iconChevronUpSmall","variant","name","type","onKeyDown","e","preventDefault","onChange","inputElement","target","toString","minus","iconChevronDownSmall","length","iconChevronUp","iconChevronDown","button","standalone","timeSelect"],"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 'mixins/input';\n\n@include form;\n\n:host {\n  @include ix-component;\n  @import 'legacy/components/forms';\n\n  display: block;\n  position: relative;\n  width: 21rem;\n\n  @media (max-width: 576px) {\n    .clock {\n      padding: 1.5rem 0 1rem 0;\n    }\n\n    .header {\n      height: $medium-control-height !important;\n    }\n  }\n\n  @media (min-width: 576px) {\n    .clock {\n      padding: 4.25rem 0 3.75rem 0;\n    }\n\n    .header {\n      height: $large-control-height !important;\n    }\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: $large-control-height;\n  }\n\n  .flex {\n    display: flex;\n  }\n\n  .clock {\n    display: flex;\n    justify-content: center;\n    align-items: center;\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  .ix-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    &.standalone {\n      padding-top: 0.5rem;\n    }\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  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\nimport {\n  iconChevronDown,\n  iconChevronDownSmall,\n  iconChevronUp,\n  iconChevronUpSmall,\n} from '@siemens/ix-icons/icons';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\ninterface TimePickerDescriptor {\n  unit: 'hour' | 'minute' | 'second';\n  placeholder: string;\n  hidden: boolean;\n}\n\ninterface TimeOutputFormat {\n  hour: string;\n  minute: string;\n  second: string;\n}\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   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\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   * Controls the visual presentation and styling of the component when it is displayed as a standalone element\n   */\n  @Prop() standaloneAppearance: boolean = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * Select time with format string\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string = DateTime.now().toFormat(this.format);\n\n  @Watch('time')\n  watchTimePropHandler(newValue: string) {\n    this._time = DateTime.fromFormat(newValue, this.format);\n    if (!this._time.isValid) {\n      throw new Error('Format is not supported or not correct');\n    }\n  }\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM' | undefined;\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectTime = 'Done';\n\n  /**\n   * Text for top label\n   *\n   * @since 2.1.0\n   */\n  @Prop() textTime: string = 'Time';\n\n  /**\n   * Time event\n   */\n  @Event() timeSelect!: EventEmitter<string>;\n\n  /**\n   * Time change event\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  @State() private _time?: DateTime;\n  @State() private _timeRef?: 'AM' | 'PM';\n  @State() private _formattedTime?: TimeOutputFormat;\n\n  componentWillLoad() {\n    this._time = DateTime.fromFormat(this.time, this.format);\n\n    if (!this._time.isValid) {\n      console.error(\n        `Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`\n      );\n      return;\n    }\n\n    this._timeRef = this.format.includes('a')\n      ? (DateTime.fromFormat(this.time, this.format).toFormat('a') as\n          | 'AM'\n          | 'PM')\n      : undefined;\n    this.formatTime();\n  }\n\n  @Watch('_time')\n  formatTime() {\n    if (!this._time) {\n      return;\n    }\n\n    const [hour, minute, second] = this._time\n      .toFormat(this.format)\n      .split(' ')[0]\n      .split(':');\n\n    this._formattedTime = {\n      hour: hour,\n      minute: minute,\n      second: second,\n    };\n  }\n\n  @Watch('_time')\n  onInternalTimeChange() {\n    this.timeChange.emit(this._time?.toFormat(this.format));\n    if (this._timeRef) this._timeRef = this._time?.toFormat('a') as 'AM' | 'PM';\n  }\n\n  timeUpdate(unit: 'hour' | 'minute' | 'second', value: number): number {\n    let maxValue = DateTime.now().endOf('day').get(unit);\n\n    if (this._timeRef === 'PM' && unit === 'hour') value += 12;\n    if (this._timeRef === 'AM' && unit === 'hour') maxValue = 12;\n\n    if (value > maxValue) {\n      value = maxValue;\n    } else if (value < 0) {\n      value = 0;\n    }\n\n    this._time = this._time?.set({\n      [unit]: value,\n    });\n    return value;\n  }\n\n  changeTimeReference() {\n    this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';\n\n    if (!this._time?.toFormat('a').includes(this._timeRef)) {\n      this._time = this._time?.plus({\n        hour: 12,\n      });\n    }\n  }\n\n  /**\n   * Get the current time based on the wanted format\n   */\n  @Method()\n  async getCurrentTime() {\n    return this._time?.toFormat(this.format);\n  }\n\n  render() {\n    let timepickerInformation: TimePickerDescriptor[] = [\n      {\n        unit: 'hour',\n        placeholder: 'HH',\n        hidden: !this.showHour,\n      },\n      {\n        unit: 'minute',\n        placeholder: 'MM',\n        hidden: !this.showMinutes,\n      },\n      {\n        unit: 'second',\n        placeholder: 'SS',\n        hidden: !this.showSeconds,\n      },\n    ];\n\n    timepickerInformation = timepickerInformation.filter(\n      (item) => !item.hidden\n    );\n\n    return (\n      <Host>\n        <ix-date-time-card\n          standaloneAppearance={this.standaloneAppearance}\n          corners={this.corners}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-typography format=\"h5\">{this.textTime || 'Time'}</ix-typography>\n          </div>\n          <div class=\"clock\">\n            {timepickerInformation.map((descriptor, index: number) => (\n              <div class=\"flex\">\n                <div class={{ columns: true, hidden: descriptor.hidden }}>\n                  <ix-icon-button\n                    size=\"16\"\n                    onClick={() =>\n                      (this._time = this._time?.plus({\n                        [descriptor.unit]: 1,\n                      }))\n                    }\n                    ghost\n                    icon={iconChevronUpSmall}\n                    variant=\"primary\"\n                    class=\"arrows\"\n                  ></ix-icon-button>\n\n                  <input\n                    class=\"ix-form-control\"\n                    name={descriptor.unit}\n                    type=\"number\"\n                    placeholder={descriptor.placeholder}\n                    value={\n                      this._formattedTime\n                        ? this._formattedTime[descriptor.unit]\n                        : ''\n                    }\n                    onKeyDown={(e) => {\n                      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n                      const value = e.key === 'ArrowUp' ? 1 : -1;\n                      this._time = this._time?.plus({\n                        [descriptor.unit]: value,\n                      });\n                      e.preventDefault();\n                    }}\n                    onChange={(e: any) => {\n                      let inputElement = e.target as HTMLInputElement;\n                      inputElement.value = this.timeUpdate(\n                        descriptor.unit,\n                        +inputElement.value\n                      ).toString();\n                    }}\n                  ></input>\n\n                  <ix-icon-button\n                    size=\"16\"\n                    onClick={() =>\n                      (this._time = this._time?.minus({\n                        [descriptor.unit]: 1,\n                      }))\n                    }\n                    ghost\n                    icon={iconChevronDownSmall}\n                    variant=\"primary\"\n                    class=\"arrows\"\n                  ></ix-icon-button>\n                </div>\n\n                {index !== timepickerInformation.length - 1 && (\n                  <div\n                    class={{\n                      'column-seperator': true,\n                      hidden: descriptor.hidden,\n                    }}\n                  >\n                    :\n                  </div>\n                )}\n              </div>\n            ))}\n\n            <div\n              class={{\n                columns: true,\n                'default-space': true,\n                hidden: this._timeRef === undefined,\n              }}\n            >\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeTimeReference()}\n                ghost\n                icon={iconChevronUp}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n              <div class=\"time-reference\">{this._timeRef}</div>\n              <ix-icon-button\n                size=\"16\"\n                onClick={() => this.changeTimeReference()}\n                ghost\n                icon={iconChevronDown}\n                variant=\"primary\"\n                class=\"arrows\"\n              ></ix-icon-button>\n            </div>\n          </div>\n          <div\n            class={{\n              button: true,\n              hidden: !this.standaloneAppearance,\n              standalone: true,\n            }}\n          >\n            <ix-button\n              onClick={() => {\n                this.timeSelect.emit(this._time?.toFormat(this.format));\n              }}\n            >\n              {this.textSelectTime}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-7cb18fa5.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as e,g as o}from"./p-DtF9fwpD.js";import{r as n}from"./p-UQa1aROL.js";import{d as h}from"./p-D3K9vmFp.js";const r=t=>!Number.isNaN(Number(t));const c=(t,i)=>{t.classList.add(i)};class l{static create(t,i=l.defaultConfig){return new l(t,i)}static mergeStyle(t,i){for(let s in i){if(t.style[s]!==i[s]){t.style[s]=i[s]}}}static getMaxBrowserHeight(){const t=document.createElement("div");const i=document.createElement("div");l.mergeStyle(t,{position:"absolute",height:"1px",opacity:0});l.mergeStyle(i,{height:"1e7px"});t.appendChild(i);document.body.appendChild(t);const s=i.offsetHeight;document.body.removeChild(t);return s}constructor(t,i){this._lastRepaint=null;this._maxElementHeight=l.getMaxBrowserHeight();this.refresh(t,i);const s=this._config;const e=()=>{const t=this._getScrollPosition();const i=this._lastRepaint;this._renderAnimationFrame=window.requestAnimationFrame(e);if(t===i){return}const o=i?t-i:0;if(!i||o<0||o>this._averageHeight){let i=this._renderChunk();this._lastRepaint=t;if(i!==false&&typeof s.afterRender==="function"){s.afterRender()}}};e()}destroy(){window.cancelAnimationFrame(this._renderAnimationFrame)}refresh(t,i=l.defaultConfig){this._config=i;if(!t||t.nodeType!==1){throw new Error("HyperList requires a valid DOM Node container")}this._element=t;const s=this._config;const e=this._scroller||s.scroller||document.createElement(s.scrollerTagName||"tr");if(typeof s.useFragment!=="boolean"){this._config.useFragment=true}if(!s.generate){throw new Error("Missing required `generate` function")}if(!r(s.total)){throw new Error("Invalid required `total` value, expected number")}if(!Array.isArray(s.itemHeight)&&!r(s.itemHeight)){throw new Error(`\n        Invalid required \`itemHeight\` value, expected number or array\n      `.trim())}else if(r(s.itemHeight)){this._itemHeights=Array(s.total).fill(s.itemHeight)}else{this._itemHeights=[s.itemHeight]}Object.keys(l.defaultConfig).filter((t=>t in s)).forEach((t=>{const i=s[t];const e=r(i);if(i&&typeof i!=="string"&&typeof i!=="number"){let i=`Invalid optional \`${t}\`, expected string or number`;throw new Error(i)}else if(e){s[t]=`${i}px`}}));const o=Boolean(s.horizontal);const n=s[o?"width":"height"];if(n){const t=r(n);const i=t?false:n.slice(-1)==="%";const s=t?parseInt(n,10):parseInt(n.replace(/px|%/,""),10);const e=window[o?"innerWidth":"innerHeight"];if(i){this._containerSize=e*s/100}else{this._containerSize=r(n)?n:s}}const h=s.scrollContainer;const c=s.itemHeight*s.total;const d=this._maxElementHeight;if(c>d){console.warn(["HyperList: The maximum element height",d+"px has","been exceeded; please reduce your item height."].join(" "))}const a={width:`${s.width}`,height:h?`${c}px`:`${s.height}`,overflow:h?"none":"auto",position:"relative"};l.mergeStyle(t,a);if(h){l.mergeStyle(s.scrollContainer,{overflow:"auto"})}const f={opacity:"0",position:"absolute",[o?"height":"width"]:"1px",[o?"width":"height"]:`${c}px`};l.mergeStyle(e,f);if(!this._scroller){t.appendChild(e)}const u=this._computeScrollPadding();this._scrollPaddingBottom=u.bottom;this._scrollPaddingTop=u.top;this._scroller=e;this._scrollHeight=this._computeScrollHeight();this._itemPositions=this._itemPositions||Array(s.total).fill(0);this._computePositions(0);this._renderChunk(this._lastRepaint!==null);if(typeof s.afterRender==="function"){s.afterRender()}}_getRow(t){const i=this._config;let s=i.generate(t);let e=s.height;if(e!==undefined&&r(e)){s=s.element;if(e!==this._itemHeights[t]){this._itemHeights[t]=e;this._computePositions(t);this._scrollHeight=this._computeScrollHeight()}}else{e=this._itemHeights[t]}if(!s||s.nodeType!==1){throw new Error(`Generator did not return a DOM Node for index: ${t}`)}c(s,i.rowClassName||"vrow");const o=this._itemPositions[t]+this._scrollPaddingTop;l.mergeStyle(s,{position:"absolute",[i.horizontal?"left":"top"]:`${o}px`});return s}_getScrollPosition(){const t=this._config;if(typeof t.overrideScrollPosition==="function"){return t.overrideScrollPosition()}return this._element[t.horizontal?"scrollLeft":"scrollTop"]}_renderChunk(t=false){const i=this._config;const s=this._element;const e=this._getScrollPosition();const o=i.total;let n=this._getFrom(e)-1;if(n<0||n-this._screenItemsLen<0){n=0}if(!t&&this._lastFrom===n){return false}this._lastFrom=n;let h=n+this._cachedItemsLen;if(h>o||h+this._cachedItemsLen>o){h=o}const r=i.useFragment?document.createDocumentFragment():[];const c=this._scroller;r[i.useFragment?"appendChild":"push"](c);for(let t=n;t<h;t++){let s=this._getRow(t);r[i.useFragment?"appendChild":"push"](s)}if(i.applyPatch){return i.applyPatch(s,r)}s.innerHTML="";s.appendChild(r)}_computePositions(t=1){const i=this._config;const s=i.total;if(t<1){t=1}for(let i=t;i<s;i++){this._itemPositions[i]=this._itemHeights[i-1]+this._itemPositions[i-1]}}_computeScrollHeight(){const t=this._config;const i=Boolean(t.horizontal);const s=t.total;const e=this._itemHeights.reduce(((t,i)=>t+i),0)+this._scrollPaddingBottom+this._scrollPaddingTop;l.mergeStyle(this._scroller,{opacity:0,position:"absolute",top:"0px",[i?"height":"width"]:"1px",[i?"width":"height"]:`${e}px`});const o=this._itemHeights.slice(0).sort(((t,i)=>t-i));const n=Math.floor(s/2);const h=s%2===0?(o[n]+o[n-1])/2:o[n];const r=i?"clientWidth":"clientHeight";const c=t.scrollContainer?t.scrollContainer:this._element;const d=c[r]?c[r]:this._containerSize;this._screenItemsLen=Math.ceil(d/h);this._containerSize=d;this._cachedItemsLen=Math.max(this._cachedItemsLen||0,this._screenItemsLen*3);this._averageHeight=h;return e}_computeScrollPadding(){const t=this._config;const i=Boolean(t.horizontal);const s=window.getComputedStyle(this._element);const e=t=>{const i=s.getPropertyValue(`padding-${t}`);return parseInt(i,10)||0};if(i){return{bottom:e("right"),top:e("left")}}else{return{bottom:e("bottom"),top:e("top")}}}_getFrom(t){let i=0;while(this._itemPositions[i]<t){i++}return i}}l.defaultConfig={width:"100%",height:"100%"};const d=":host{display:block}";const a=class{constructor(s){t(this,s);this.contextChange=i(this,"contextChange",7);this.nodeToggled=i(this,"nodeToggled",7);this.nodeClicked=i(this,"nodeClicked",7);this.nodeRemoved=i(this,"nodeRemoved",7);this.model={};this.context={};this.toggleListener=new Map;this.itemClickListener=new Map;this.updates=new Map;this.hasFirstRender=false}updatePadding(t,i){t.style.paddingLeft=i.level+"rem"}getVirtualizerOptions(){const t=this.buildTreeList(this.model[this.root]);let i=(i,s,e)=>{if(i.hasChildren&&!this.toggleListener.has(s)){const o=s=>{s.preventDefault();s.stopPropagation();const o=this.getContext(t[e].id);o.isExpanded=!o.isExpanded;this.nodeToggled.emit({id:i.id,isExpaned:o.isExpanded});this.setContext(i.id,o)};s.addEventListener("toggle",o);this.toggleListener.set(s,o)}};return{width:"100%",height:"100%",itemHeight:32,total:t.length,generate:s=>{const e=t[s];const o=this.hostElement.querySelector(`[data-tree-node-id="${e.id}"]`);const r=this.getContext(e.id);if(o){o.hasChildren=e.hasChildren;o.context=Object.assign({},r);i(e,o,s);if(this.updates.has(e.id)){const t=this.updates.get(e.id);if(t){t(e,Object.assign({},this.context))}}this.updatePadding(o,e);return o}const c=t=>{this.updates.set(e.id,t)};let l=null;if(this.renderItem){l=this.renderItem(s,e,t,Object.assign({},this.context),c)}if(l===null){l=n(e,r,c)}const d=l;d.setAttribute("data-tree-node-id",e.id);d.style.paddingRight="1rem";this.updatePadding(d,e);if(!this.itemClickListener.has(d)){const t=t=>{const i=t.composedPath();const s=i.indexOf(this.hostElement);const o=i.slice(0,s);const n=h.pathIncludesTrigger(o);if(t.defaultPrevented){return}if(n){return}Object.values(this.context).forEach((t=>t.isSelected=false));const r=this.getContext(e.id);r.isSelected=true;this.setContext(e.id,r);this.nodeClicked.emit(e.id)};d.addEventListener("toggle",(t=>{t.preventDefault()}));d.addEventListener("click",t);this.itemClickListener.set(d,t)}i(e,d,s);return d}}}setContext(t,i){this.context=Object.assign(Object.assign({},this.context),{[t]:i});this.contextChange.emit(this.context)}getContext(t){if(!this.context){return{isExpanded:false,isSelected:false}}if(!this.context[t]){this.context[t]={isExpanded:false,isSelected:false}}return this.context[t]}buildTreeList(t,i=0){const s=[];if(t===null||t===void 0?void 0:t.hasChildren){const e=i+1;t.children.forEach((t=>{const o=this.model[t];const n=this.getContext(t);s.push(Object.assign(Object.assign({},o),{level:i}));if(o.hasChildren&&n.isExpanded){s.push(...this.buildTreeList(o,e))}}))}return s}componentDidLoad(){this.initList();this.observer=new MutationObserver((t=>{let i=[];t.forEach((t=>{i=[...i,...Array.from(t.removedNodes)];t.addedNodes.forEach((t=>{const s=i.indexOf(t);if(s>=0){i.splice(s,1)}}))}));this.nodeRemoved.emit(i)}));this.observer.observe(this.hostElement,{childList:true})}componentWillRender(){this.hasFirstRender=true;if(this.isListInitialized()){this.refreshList()}else{this.initList()}}disconnectedCallback(){var t,i;(t=this.hyperlist)===null||t===void 0?void 0:t.destroy();(i=this.observer)===null||i===void 0?void 0:i.disconnect()}modelChange(){if(this.hasFirstRender&&!this.isListInitialized()){this.initList()}}isListInitialized(){var t;const i=(t=this.hyperlist)===null||t===void 0?void 0:t._itemPositions;return i!==undefined&&i.length&&!(i===null||i===void 0?void 0:i.some((t=>t===undefined||Number.isNaN(t))))}refreshList(){if(this.hyperlist){this.hyperlist.refresh(this.hostElement,this.getVirtualizerOptions())}}initList(){var t;if(!this.model){return}(t=this.hyperlist)===null||t===void 0?void 0:t.destroy();const i=this.getVirtualizerOptions();this.hyperlist=new l(this.hostElement,i)}render(){return s(e,{key:"f07f8e18cb87e576426b1ba321d8d198712db756"},s("slot",{key:"c2f1bfa0cb99eeac46d11270d22e949a4d8674c3"}))}get hostElement(){return o(this)}static get watchers(){return{model:["modelChange"]}}};a.style=d;export{a as ix_tree};
+//# sourceMappingURL=p-7cb18fa5.entry.js.map

package/dist/siemens-ix/p-7cb18fa5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isNumber","input","Number","isNaN","addClass","element","className","classList","add","VirtualList","create","userProvidedConfig","defaultConfig","mergeStyle","style","i","getMaxBrowserHeight","wrapper","document","createElement","fixture","position","height","opacity","appendChild","body","maxElementHeight","offsetHeight","removeChild","constructor","this","_lastRepaint","_maxElementHeight","refresh","config","_config","render","scrollTop","_getScrollPosition","lastRepaint","_renderAnimationFrame","window","requestAnimationFrame","diff","_averageHeight","rendered","_renderChunk","afterRender","destroy","cancelAnimationFrame","nodeType","Error","_element","scroller","_scroller","scrollerTagName","useFragment","generate","total","Array","isArray","itemHeight","trim","_itemHeights","fill","Object","keys","filter","prop","forEach","value","isValueNumber","msg","isHorizontal","Boolean","horizontal","isValuePercent","slice","numberValue","parseInt","replace","innerSize","_containerSize","scrollContainer","scrollerHeight","console","warn","join","elementStyle","width","overflow","scrollerStyle","padding","_computeScrollPadding","_scrollPaddingBottom","bottom","_scrollPaddingTop","top","_scrollHeight","_computeScrollHeight","_itemPositions","_computePositions","_getRow","item","undefined","rowClassName","overrideScrollPosition","force","from","_getFrom","_screenItemsLen","_lastFrom","to","_cachedItemsLen","fragment","createDocumentFragment","row","applyPatch","innerHTML","scrollHeight","reduce","a","b","sortedItemHeights","sort","middle","Math","floor","averageHeight","clientProp","containerHeight","ceil","max","isHoriz","styles","getComputedStyle","location","cssValue","getPropertyValue","treeCss","Tree","hostRef","model","context","toggleListener","Map","itemClickListener","updates","hasFirstRender","updatePadding","paddingLeft","level","getVirtualizerOptions","list","buildTreeList","root","setToggleListener","el","index","hasChildren","has","toggleCallback","e","preventDefault","stopPropagation","getContext","id","isExpanded","nodeToggled","emit","isExpaned","setContext","addEventListener","set","length","renderedTreeItem","hostElement","querySelector","assign","doUpdate","get","update","callback","innerElement","renderItem","renderDefaultItem","setAttribute","paddingRight","itemClickCallback","event","path","composedPath","treeIndex","indexOf","treePath","hasTrigger","dropdownController","pathIncludesTrigger","defaultPrevented","values","c","isSelected","nodeClicked","contextChange","itemList","newLevel","children","push","componentDidLoad","initList","observer","MutationObserver","records","removed","record","removedNodes","addedNodes","an","splice","nodeRemoved","observe","childList","componentWillRender","isListInitialized","refreshList","disconnectedCallback","_a","hyperlist","_b","disconnect","modelChange","itemPositions","some","h","Host","key"],"sources":["src/components/utils/lazy-list/lazy.ts","src/components/tree/tree.css?tag=ix-tree&encapsulation=shadow","src/components/tree/tree.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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// Manually forked from https://github.com/tbranyen/hyperlist to remove\n// features a direct document calls\n//\n// Hyperlist is licensed MIT. https://github.com/tbranyen/hyperlist\n\nexport type VirtualListConfig = {\n  applyPatch?: (\n    element: HTMLElement,\n    fragment: DocumentFragment | DocumentFragment[]\n  ) => void;\n  overrideScrollPosition?: () => void;\n  rowClassName?: string;\n  scrollContainer?: HTMLElement;\n  width: string;\n  height: string;\n  afterRender?: () => void;\n  scrollerTagName?: string;\n  scroller?: HTMLElement;\n  useFragment?: boolean;\n  generate?: (index: number) => HTMLElement;\n  total?: number;\n  itemHeight?: number;\n  horizontal?: boolean;\n};\n\nconst isNumber = (input: unknown) => !Number.isNaN(Number(input));\n\nconst addClass = (element: HTMLElement, className: string) => {\n  element.classList.add(className);\n};\n\nexport class VirtualList {\n  _config!: VirtualListConfig;\n  _lastRepaint: null;\n  _maxElementHeight: number;\n  _renderAnimationFrame!: number;\n  _averageHeight!: number;\n\n  static readonly defaultConfig: VirtualListConfig = {\n    width: '100%',\n    height: '100%',\n  };\n  _element: any;\n  _scroller: any;\n  _itemHeights!: number[];\n  _containerSize!: number | string;\n  _scrollPaddingBottom!: number;\n  _scrollPaddingTop!: number;\n  _scrollHeight: any;\n  _itemPositions: any;\n  _screenItemsLen!: number;\n  _lastFrom!: number;\n  _cachedItemsLen: any;\n\n  static create(\n    element: HTMLElement,\n    userProvidedConfig: VirtualListConfig = VirtualList.defaultConfig\n  ) {\n    return new VirtualList(element, userProvidedConfig);\n  }\n\n  static mergeStyle(element: HTMLElement, style: any) {\n    for (let i in style) {\n      if (element.style[i as any] !== style[i]) {\n        element.style[i as any] = style[i];\n      }\n    }\n  }\n\n  static getMaxBrowserHeight() {\n    // Create two elements, the wrapper is `1px` tall and is transparent and\n    // positioned at the top of the page. Inside that is an element that gets\n    // set to 1 billion pixels. Then reads the max height the browser can\n    // calculate.\n    const wrapper = document.createElement('div');\n    const fixture = document.createElement('div');\n\n    // As said above, these values get set to put the fixture elements into the\n    // right visual state.\n    VirtualList.mergeStyle(wrapper, {\n      position: 'absolute',\n      height: '1px',\n      opacity: 0,\n    });\n    VirtualList.mergeStyle(fixture, { height: '1e7px' });\n\n    // Add the fixture into the wrapper element.\n    wrapper.appendChild(fixture);\n\n    // Apply to the page, the values won't kick in unless this is attached.\n    document.body.appendChild(wrapper);\n\n    // Get the maximum element height in pixels.\n    const maxElementHeight = fixture.offsetHeight;\n\n    // Remove the element immediately after reading the value.\n    document.body.removeChild(wrapper);\n\n    return maxElementHeight;\n  }\n\n  constructor(element: HTMLElement, userProvidedConfig: VirtualListConfig) {\n    this._lastRepaint = null;\n    this._maxElementHeight = VirtualList.getMaxBrowserHeight();\n\n    this.refresh(element, userProvidedConfig);\n\n    const config = this._config;\n\n    // Create internal render loop.\n    const render = () => {\n      const scrollTop = this._getScrollPosition();\n      const lastRepaint = this._lastRepaint;\n\n      this._renderAnimationFrame = window.requestAnimationFrame(render);\n\n      if (scrollTop === lastRepaint) {\n        return;\n      }\n\n      const diff = lastRepaint ? scrollTop - lastRepaint : 0;\n      if (!lastRepaint || diff < 0 || diff > this._averageHeight) {\n        let rendered = this._renderChunk();\n\n        this._lastRepaint = scrollTop;\n\n        if (rendered !== false && typeof config.afterRender === 'function') {\n          config.afterRender();\n        }\n      }\n    };\n\n    render();\n  }\n\n  destroy() {\n    window.cancelAnimationFrame(this._renderAnimationFrame);\n  }\n\n  refresh(\n    element: HTMLElement,\n    userProvidedConfig: VirtualListConfig = VirtualList.defaultConfig\n  ) {\n    this._config = userProvidedConfig;\n\n    if (!element || element.nodeType !== 1) {\n      throw new Error('HyperList requires a valid DOM Node container');\n    }\n\n    this._element = element;\n\n    const config = this._config as any;\n\n    const scroller =\n      this._scroller ||\n      config.scroller ||\n      document.createElement(config.scrollerTagName || 'tr');\n\n    // Default configuration option `useFragment` to `true`.\n    if (typeof config.useFragment !== 'boolean') {\n      this._config.useFragment = true;\n    }\n\n    if (!config.generate) {\n      throw new Error('Missing required `generate` function');\n    }\n\n    if (!isNumber(config.total)) {\n      throw new Error('Invalid required `total` value, expected number');\n    }\n\n    if (!Array.isArray(config.itemHeight) && !isNumber(config.itemHeight)) {\n      throw new Error(\n        `\n        Invalid required \\`itemHeight\\` value, expected number or array\n      `.trim()\n      );\n    } else if (isNumber(config.itemHeight)) {\n      this._itemHeights = Array(config.total).fill(config.itemHeight);\n    } else {\n      this._itemHeights = [config.itemHeight as any];\n    }\n\n    // Width and height should be coerced to string representations. Either in\n    // `%` or `px`.\n    Object.keys(VirtualList.defaultConfig)\n      .filter((prop) => prop in config)\n      .forEach((prop) => {\n        const value = config[prop as any];\n        const isValueNumber = isNumber(value);\n\n        if (value && typeof value !== 'string' && typeof value !== 'number') {\n          let msg = `Invalid optional \\`${prop}\\`, expected string or number`;\n          throw new Error(msg);\n        } else if (isValueNumber) {\n          config[prop] = `${value}px`;\n        }\n      });\n\n    const isHorizontal = Boolean(config.horizontal);\n    const value = config[isHorizontal ? 'width' : 'height'];\n\n    if (value) {\n      const isValueNumber = isNumber(value);\n      const isValuePercent = isValueNumber ? false : value.slice(-1) === '%';\n      // Compute the containerHeight as number\n      const numberValue = isValueNumber\n        ? parseInt(value, 10)\n        : parseInt(value.replace(/px|%/, ''), 10);\n      const innerSize = window[isHorizontal ? 'innerWidth' : 'innerHeight'];\n\n      if (isValuePercent) {\n        this._containerSize = (innerSize * numberValue) / 100;\n      } else {\n        this._containerSize = isNumber(value) ? value : numberValue;\n      }\n    }\n\n    const scrollContainer = config.scrollContainer;\n    const scrollerHeight = config.itemHeight * config.total;\n    const maxElementHeight = this._maxElementHeight;\n\n    if (scrollerHeight > maxElementHeight) {\n      console.warn(\n        [\n          'HyperList: The maximum element height',\n          maxElementHeight + 'px has',\n          'been exceeded; please reduce your item height.',\n        ].join(' ')\n      );\n    }\n\n    // Decorate the container element with styles that will match\n    // the user supplied configuration.\n    const elementStyle = {\n      width: `${config.width}`,\n      height: scrollContainer ? `${scrollerHeight}px` : `${config.height}`,\n      overflow: scrollContainer ? 'none' : 'auto',\n      position: 'relative',\n    };\n\n    VirtualList.mergeStyle(element, elementStyle);\n\n    if (scrollContainer) {\n      VirtualList.mergeStyle(config.scrollContainer, { overflow: 'auto' });\n    }\n\n    const scrollerStyle = {\n      opacity: '0',\n      position: 'absolute',\n      [isHorizontal ? 'height' : 'width']: '1px',\n      [isHorizontal ? 'width' : 'height']: `${scrollerHeight}px`,\n    };\n\n    VirtualList.mergeStyle(scroller, scrollerStyle);\n\n    // Only append the scroller element once.\n    if (!this._scroller) {\n      element.appendChild(scroller);\n    }\n\n    const padding = this._computeScrollPadding();\n    this._scrollPaddingBottom = padding.bottom;\n    this._scrollPaddingTop = padding.top;\n\n    // Set the scroller instance.\n    this._scroller = scroller;\n    this._scrollHeight = this._computeScrollHeight();\n\n    // Reuse the item positions if refreshed, otherwise set to empty array.\n    this._itemPositions = this._itemPositions || Array(config.total).fill(0);\n\n    // Each index in the array should represent the position in the DOM.\n    this._computePositions(0);\n\n    // Render after refreshing. Force render if we're calling refresh manually.\n    this._renderChunk(this._lastRepaint !== null);\n\n    if (typeof config.afterRender === 'function') {\n      config.afterRender();\n    }\n  }\n\n  _getRow(i: number) {\n    const config = this._config as any;\n    let item = config.generate(i) as any;\n    let height = item.height;\n\n    if (height !== undefined && isNumber(height)) {\n      item = item.element;\n\n      // The height isn't the same as predicted, compute positions again\n      if (height !== this._itemHeights[i]) {\n        this._itemHeights[i] = height;\n        this._computePositions(i);\n        this._scrollHeight = this._computeScrollHeight();\n      }\n    } else {\n      height = this._itemHeights[i];\n    }\n\n    if (!item || item.nodeType !== 1) {\n      throw new Error(`Generator did not return a DOM Node for index: ${i}`);\n    }\n\n    addClass(item, config.rowClassName || 'vrow');\n\n    const top = this._itemPositions[i] + this._scrollPaddingTop;\n\n    VirtualList.mergeStyle(item, {\n      position: 'absolute',\n      [config.horizontal ? 'left' : 'top']: `${top}px`,\n    });\n\n    return item;\n  }\n\n  _getScrollPosition() {\n    const config = this._config;\n\n    if (typeof config.overrideScrollPosition === 'function') {\n      return config.overrideScrollPosition();\n    }\n\n    return this._element[config.horizontal ? 'scrollLeft' : 'scrollTop'];\n  }\n\n  _renderChunk(force: boolean = false) {\n    const config = this._config;\n    const element = this._element;\n    const scrollTop = this._getScrollPosition();\n    const total: number = config.total!;\n\n    let from = this._getFrom(scrollTop) - 1;\n\n    if (from < 0 || from - this._screenItemsLen < 0) {\n      from = 0;\n    }\n\n    if (!force && this._lastFrom === from) {\n      return false;\n    }\n\n    this._lastFrom = from;\n\n    let to = from + this._cachedItemsLen;\n\n    if (to > total || to + this._cachedItemsLen > total) {\n      to = total;\n    }\n\n    // Append all the new rows in a document fragment that we will later append\n    // to the parent node\n    const fragment: any = config.useFragment\n      ? document.createDocumentFragment()\n      : [\n          // Sometimes you'll pass fake elements to this tool and Fragments require\n          // real elements.\n        ];\n\n    // The element that forces the container to scroll.\n    const scroller = this._scroller;\n\n    // Keep the scroller in the list of children.\n    fragment[config.useFragment ? 'appendChild' : 'push'](scroller);\n\n    for (let i = from; i < to; i++) {\n      let row = this._getRow(i);\n\n      fragment[config.useFragment ? 'appendChild' : 'push'](row);\n    }\n\n    if (config.applyPatch) {\n      return config.applyPatch(element, fragment);\n    }\n\n    element.innerHTML = '';\n    element.appendChild(fragment);\n  }\n\n  _computePositions(from = 1) {\n    const config = this._config;\n    const total = config.total!;\n\n    if (from < 1) {\n      from = 1;\n    }\n\n    for (let i = from; i < total; i++) {\n      this._itemPositions[i] =\n        this._itemHeights[i - 1] + this._itemPositions[i - 1];\n    }\n  }\n\n  _computeScrollHeight() {\n    const config = this._config as any;\n    const isHorizontal = Boolean(config.horizontal);\n    const total = config.total;\n    const scrollHeight =\n      this._itemHeights.reduce((a, b) => a + b, 0) +\n      this._scrollPaddingBottom +\n      this._scrollPaddingTop;\n\n    VirtualList.mergeStyle(this._scroller, {\n      opacity: 0,\n      position: 'absolute',\n      top: '0px',\n      [isHorizontal ? 'height' : 'width']: '1px',\n      [isHorizontal ? 'width' : 'height']: `${scrollHeight}px`,\n    });\n\n    // Calculate the height median\n    const sortedItemHeights = this._itemHeights.slice(0).sort((a, b) => a - b);\n    const middle = Math.floor(total / 2);\n    const averageHeight =\n      total % 2 === 0\n        ? (sortedItemHeights[middle] + sortedItemHeights[middle - 1]) / 2\n        : sortedItemHeights[middle];\n\n    const clientProp = isHorizontal ? 'clientWidth' : 'clientHeight';\n    const element = config.scrollContainer\n      ? config.scrollContainer\n      : this._element;\n    const containerHeight = element[clientProp]\n      ? element[clientProp]\n      : this._containerSize;\n    this._screenItemsLen = Math.ceil(containerHeight / averageHeight);\n    this._containerSize = containerHeight;\n\n    // Cache 3 times the number of items that fit in the container viewport.\n    this._cachedItemsLen = Math.max(\n      this._cachedItemsLen || 0,\n      this._screenItemsLen * 3\n    );\n    this._averageHeight = averageHeight;\n\n    return scrollHeight;\n  }\n\n  _computeScrollPadding() {\n    const config = this._config;\n    const isHoriz = Boolean(config.horizontal);\n    const styles = window.getComputedStyle(this._element);\n\n    const padding = (location: string) => {\n      const cssValue = styles.getPropertyValue(`padding-${location}`);\n      return parseInt(cssValue, 10) || 0;\n    };\n\n    if (isHoriz) {\n      return {\n        bottom: padding('right'),\n        top: padding('left'),\n      };\n    } else {\n      return {\n        bottom: padding('bottom'),\n        top: padding('top'),\n      };\n    }\n  }\n\n  _getFrom(scrollTop: number) {\n    let i = 0;\n\n    while (this._itemPositions[i] < scrollTop) {\n      i++;\n    }\n\n    return i;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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  Watch,\n} from '@stencil/core';\nimport { VirtualList, VirtualListConfig } from './../utils/lazy-list';\nimport { renderDefaultItem } from '../tree-item/default-tree-item';\nimport {\n  TreeContext,\n  TreeItem,\n  TreeItemContext,\n  TreeItemVisual,\n  TreeModel,\n  UpdateCallback,\n} from './tree-model';\nimport { dropdownController } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-tree',\n  styleUrl: 'tree.css',\n  shadow: true,\n})\nexport class Tree {\n  @Element() hostElement!: HTMLIxTreeElement;\n\n  /**\n   * Initial root element will not be rendered\n   */\n  @Prop() root!: string;\n\n  /**\n   * Tree model\n   */\n  @Prop() model: TreeModel<any> = {};\n\n  /**\n   * Render function of tree items\n   */\n  @Prop() renderItem?: <T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement;\n\n  /**\n   * Selection and collapsed state management\n   */\n  @Prop({ mutable: true }) context: TreeContext = {};\n\n  /**\n   * Context changed\n   */\n  @Event() contextChange!: EventEmitter<TreeContext>;\n\n  /**\n   * Node toggled event\n   * @since 1.5.0\n   */\n  @Event() nodeToggled!: EventEmitter<{ id: string; isExpaned: boolean }>;\n\n  /**\n   * Node clicked event\n   * @since 1.5.0\n   */\n  @Event() nodeClicked!: EventEmitter<string>;\n\n  /**\n   * Emits removed nodes\n   */\n  @Event() nodeRemoved!: EventEmitter<any>;\n\n  private hyperlist?: VirtualList;\n\n  private toggleListener = new Map<HTMLElement, Function>();\n  private itemClickListener = new Map<HTMLElement, Function>();\n  private updates = new Map<string, UpdateCallback>();\n  private observer!: MutationObserver;\n  private hasFirstRender = false;\n\n  private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {\n    element.style.paddingLeft = item.level + 'rem';\n  }\n\n  private getVirtualizerOptions(): VirtualListConfig {\n    const list = this.buildTreeList(this.model[this.root]);\n\n    let setToggleListener = (\n      item: TreeItemVisual<any>,\n      el: HTMLElement,\n      index: number\n    ) => {\n      if (item.hasChildren && !this.toggleListener.has(el)) {\n        const toggleCallback = (e: Event) => {\n          e.preventDefault();\n          e.stopPropagation();\n          const context = this.getContext(list[index].id);\n          context.isExpanded = !context.isExpanded;\n          this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });\n          this.setContext(item.id, context);\n        };\n        el.addEventListener('toggle', toggleCallback);\n        this.toggleListener.set(el, toggleCallback);\n      }\n    };\n\n    return {\n      width: '100%',\n      height: '100%',\n      itemHeight: 32,\n      total: list.length,\n      generate: (index: number) => {\n        const item = list[index];\n\n        const renderedTreeItem = this.hostElement.querySelector(\n          `[data-tree-node-id=\"${item.id}\"]`\n        ) as HTMLIxTreeItemElement;\n\n        const context = this.getContext(item.id);\n\n        if (renderedTreeItem) {\n          renderedTreeItem.hasChildren = item.hasChildren;\n          renderedTreeItem.context = { ...context };\n\n          setToggleListener(item, renderedTreeItem, index);\n\n          if (this.updates.has(item.id)) {\n            const doUpdate = this.updates.get(item.id);\n\n            if (doUpdate) {\n              doUpdate(item, { ...this.context });\n            }\n          }\n\n          this.updatePadding(renderedTreeItem, item);\n          return renderedTreeItem;\n        }\n\n        const update = (callback: UpdateCallback) => {\n          this.updates.set(item.id, callback);\n        };\n\n        let innerElement: HTMLElement | null = null;\n        if (this.renderItem) {\n          innerElement = this.renderItem(\n            index,\n            item,\n            list,\n            { ...this.context },\n            update\n          );\n        }\n\n        if (innerElement === null) {\n          innerElement = renderDefaultItem(item, context, update);\n        }\n\n        const el = innerElement;\n        el.setAttribute('data-tree-node-id', item.id);\n        el.style.paddingRight = '1rem';\n        this.updatePadding(el, item);\n\n        if (!this.itemClickListener.has(el)) {\n          const itemClickCallback = (event: Event) => {\n            const path = event.composedPath();\n            const treeIndex = path.indexOf(this.hostElement);\n            const treePath = path.slice(0, treeIndex);\n            const hasTrigger = dropdownController.pathIncludesTrigger(treePath);\n\n            if (event.defaultPrevented) {\n              return;\n            }\n\n            if (hasTrigger) {\n              return;\n            }\n\n            Object.values(this.context).forEach((c) => (c.isSelected = false));\n            const context = this.getContext(item.id);\n            context.isSelected = true;\n            this.setContext(item.id, context);\n            this.nodeClicked.emit(item.id);\n          };\n          el.addEventListener('toggle', (event) => {\n            event.preventDefault();\n          });\n          el.addEventListener('click', itemClickCallback);\n          this.itemClickListener.set(el, itemClickCallback);\n        }\n\n        setToggleListener(item, el, index);\n\n        return el;\n      },\n    };\n  }\n\n  private setContext(id: string, context: TreeItemContext) {\n    this.context = {\n      ...this.context,\n      [id]: context,\n    };\n\n    this.contextChange.emit(this.context);\n  }\n\n  private getContext(id: string): TreeItemContext {\n    if (!this.context) {\n      return {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    if (!this.context[id]) {\n      this.context[id] = {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    return this.context[id];\n  }\n\n  private buildTreeList(\n    root: TreeItem<any>,\n    level: number = 0\n  ): TreeItemVisual<any>[] {\n    const itemList: TreeItemVisual<any>[] = [];\n\n    if (root?.hasChildren) {\n      const newLevel = level + 1;\n      root.children.forEach((id: string) => {\n        const item = this.model[id];\n        const context = this.getContext(id);\n        itemList.push({ ...item, level });\n        if (item.hasChildren && context.isExpanded) {\n          itemList.push(...this.buildTreeList(item, newLevel));\n        }\n      });\n    }\n\n    return itemList;\n  }\n\n  componentDidLoad() {\n    this.initList();\n\n    this.observer = new MutationObserver((records) => {\n      let removed: unknown[] = [];\n\n      records.forEach((record) => {\n        removed = [...removed, ...Array.from(record.removedNodes)];\n\n        record.addedNodes.forEach((an) => {\n          const index = removed.indexOf(an);\n          if (index >= 0) {\n            removed.splice(index, 1);\n          }\n        });\n      });\n\n      this.nodeRemoved.emit(removed);\n    });\n\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillRender() {\n    this.hasFirstRender = true;\n\n    if (this.isListInitialized()) {\n      this.refreshList();\n    } else {\n      this.initList();\n    }\n  }\n\n  disconnectedCallback() {\n    this.hyperlist?.destroy();\n    this.observer?.disconnect();\n  }\n\n  @Watch('model')\n  modelChange() {\n    if (this.hasFirstRender && !this.isListInitialized()) {\n      this.initList();\n    }\n  }\n\n  private isListInitialized() {\n    //@ts-ignore\n    const itemPositions = this.hyperlist?._itemPositions;\n\n    return (\n      itemPositions !== undefined &&\n      itemPositions.length &&\n      !itemPositions?.some(\n        (item: number) => item === undefined || Number.isNaN(item)\n      )\n    );\n  }\n\n  private refreshList() {\n    if (this.hyperlist) {\n      this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());\n    }\n  }\n\n  private initList() {\n    if (!this.model) {\n      return;\n    }\n\n    this.hyperlist?.destroy();\n    const config = this.getVirtualizerOptions();\n    this.hyperlist = new VirtualList(this.hostElement, config);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-802636fd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,H as r,g as h}from"./p-DtF9fwpD.js";import{a as i}from"./p-Bb7pDeaQ.js";const c=':host{display:inline-flex;flex-direction:row;position:relative;height:1.5rem;margin-block-start:0.25rem;margin-block-end:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 input[type=checkbox]{display:none}:host .wrapper{display:flex;align-items:flex-start;width:100%;height:100%}:host .label{display:inline-block;white-space:normal;overflow:hidden;text-overflow:ellipsis;margin-block-start:0.125rem;margin-inline-start:0.5625rem}:host .switch{all:unset;position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem}:host .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:0.0625rem solid transparent}:host .slider:before{position:absolute;content:"";height:1.125rem;width:1.125rem;left:0.125rem;bottom:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host .switch.checked>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.5rem)}:host .switch>.slider{border-color:var(--theme-switch-off--border-color)}:host .switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host .switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host .switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host .switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host .switch.checked>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host .switch.checked:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host .switch.checked:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host .switch.checked:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host .switch.checked:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host .switch.indeterminate>.slider::before{transform:translateX(0.75rem)}:host(:not(.disabled)) .wrapper{cursor:pointer}:host(:not(.disabled)) .switch:focus-visible>.slider{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:0.0625rem}:host(.disabled){pointer-events:none}:host(.disabled) .switch{opacity:0.5}:host(.disabled) .switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) .switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) .switch.checked>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) .switch.checked>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .label{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--info\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--info--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--info--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--info\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--info--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--info--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--info\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--info--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--info--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--info\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--info--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--info--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--info\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--info--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--info--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--info\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--info--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--info--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--info\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--info--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--info--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--info\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--info--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--info--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--info\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--info--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--info--active\n  )}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--warning\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--warning--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--warning--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--warning\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--warning--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--warning--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--warning\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--warning--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--warning--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--warning\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--warning--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--warning--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--warning\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--warning--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--warning--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--warning\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--warning--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--warning--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--warning\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--warning--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--warning--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--warning\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--warning--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--warning--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--warning\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--warning--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--warning--active\n  )}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}';const n=class{constructor(t){e(this,t);this.checkedChange=o(this,"checkedChange",7);this.valueChange=o(this,"valueChange",7);if(t.$hostElement$["s-ei"]){this.formInternals=t.$hostElement$["s-ei"]}else{this.formInternals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.formInternals}this.value="on";this.checked=false;this.disabled=false;this.indeterminate=false;this.textOn="On";this.textOff="Off";this.textIndeterminate="Mixed";this.hideText=false;this.required=false}onCheckedChange(e){if(this.disabled){return}const o=this.indeterminate;const t=this.checked;if(this.indeterminate){this.indeterminate=false}this.checked=e;const{defaultPrevented:r}=this.checkedChange.emit(this.checked);if(r){this.indeterminate=o;this.checked=t}}componentWillLoad(){this.updateFormInternalValue()}updateFormInternalValue(){if(this.checked){this.formInternals.setFormValue(this.value)}else{this.formInternals.setFormValue(null)}}watchCheckedChange(){this.updateFormInternalValue()}hasValidValue(){return Promise.resolve(this.checked)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}render(){let e=this.textOff;if(this.checked){e=this.textOn}if(this.indeterminate){e=this.textIndeterminate}return t(r,{key:"f531e9d80601ee7884a09b26adbcef4ccb1e6220",class:{disabled:this.disabled}},t("label",{key:"f1ed4a7be7a1b54fd2b22ee722f4548652e902e5",class:"wrapper"},t("button",{key:"f5c1b49ff55e2696ad7887a45ab316e41f189dab",role:"switch","aria-checked":i(this.checked),class:{switch:true,checked:this.checked,indeterminate:this.indeterminate},onClick:()=>this.onCheckedChange(!this.checked)},t("div",{key:"78d480eb757f90adff629dee453be7989aa263f7",class:"slider"})),t("input",{key:"e95ea3776b169e735cf471807dc1c18debdbaed0",type:"checkbox",disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,tabindex:0,"aria-hidden":i(true),"aria-checked":i(this.checked),onChange:e=>this.onCheckedChange(e.target.checked)}),!this.hideText&&t("ix-typography",{key:"1edb349714ec98ed6b3b57071d2a588bdd0c5bba",class:"label"},e)))}static get formAssociated(){return true}get hostElement(){return h(this)}static get watchers(){return{checked:["watchCheckedChange"]}}};n.style=c;export{n as ix_toggle};
+//# sourceMappingURL=p-802636fd.entry.js.map

package/dist/siemens-ix/p-802636fd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toggleCss","Toggle","constructor","hostRef","this","value","checked","disabled","indeterminate","textOn","textOff","textIndeterminate","hideText","required","onCheckedChange","newChecked","wasIndeterminate","oldChecked","defaultPrevented","checkedChange","emit","componentWillLoad","updateFormInternalValue","formInternals","setFormValue","watchCheckedChange","hasValidValue","Promise","resolve","getAssociatedFormElement","form","render","toggleText","h","Host","key","class","role","a11yBoolean","switch","onClick","type","tabindex","onChange","event","target"],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.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 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  height: 1.5rem;\n  margin-block-start: 0.25rem;\n  margin-block-end: 0.25rem;\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  .wrapper {\n    display: flex;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n  }\n\n  .label {\n    display: inline-block;\n    white-space: normal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-block-start: 0.125rem;\n    margin-inline-start: 0.5625rem;\n  }\n\n  .switch {\n    all: unset;\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n  }\n\n  .slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 1.5rem;\n    border: 0.0625rem solid transparent;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 1.125rem;\n    width: 1.125rem;\n    left: 0.125rem;\n    bottom: 0.125rem;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 50%;\n  }\n\n  .switch.checked > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.5rem);\n  }\n\n  .switch > .slider {\n    border-color: var(--theme-switch-off--border-color);\n  }\n\n  .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n    border-color: var(--theme-switch-off--border-color--hover);\n  }\n\n  .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n    border-color: var(--theme-switch-off--border-color--active);\n  }\n\n  .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background);\n    border-color: var(--theme-switch-on--border-color);\n  }\n\n  .switch.checked:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n    border-color: var(--theme-switch-on--border-color--hover);\n  }\n\n  .switch.checked:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  .switch.checked:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n    border-color: var(--theme-switch-on--border-color--active);\n  }\n\n  .switch.checked:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  .switch.indeterminate > .slider::before {\n    transform: translateX(0.75rem);\n  }\n}\n\n:host(:not(.disabled)) {\n  .wrapper {\n    cursor: pointer;\n  }\n\n  .switch:focus-visible > .slider {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: 0.0625rem;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  .switch {\n    opacity: 0.5;\n  }\n\n  .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  .switch.checked > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .label {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n@mixin toggle-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    .slider {\n      @content;\n    }\n  }\n}\n\n@mixin define-toggle-vars($state, $type) {\n  --theme-switch-#{$state}--background: var(\n    --theme-switch-#{$state}--background--#{$type}\n  );\n  --theme-switch-#{$state}--background--hover: var(\n    --theme-switch-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-#{$state}--background--active: var(\n    --theme-switch-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-thumb-#{$state}--background: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}\n  );\n  --theme-switch-thumb-#{$state}--background--hover: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-thumb-#{$state}--background--active: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-#{$state}--border-color: var(\n    --theme-switch-#{$state}--border-color--#{$type}\n  );\n  --theme-switch-#{$state}--border-color--hover: var(\n    --theme-switch-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-switch-#{$state}--border-color--active: var(\n    --theme-switch-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include toggle-variant($selector: '.ix-info') {\n  @include define-toggle-vars('off', 'info');\n  @include define-toggle-vars('on', 'info');\n  @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant($selector: '.ix-warning') {\n  @include define-toggle-vars('off', 'warning');\n  @include define-toggle-vars('on', 'warning');\n  @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant($selector: '.ix-invalid--required') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant($selector: '.ix-invalid') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent } from '../utils/input';\n\n/**\n * @form-ready 2.6.0\n * */\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n  @AttachInternals() formInternals!: ElementInternals;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /** @internal */\n  @Event() valueChange!: EventEmitter<string>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.disabled) {\n      return;\n    }\n\n    const wasIndeterminate = this.indeterminate;\n    const oldChecked = this.checked;\n\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n\n    this.checked = newChecked;\n\n    const { defaultPrevented } = this.checkedChange.emit(this.checked);\n\n    if (defaultPrevented) {\n      this.indeterminate = wasIndeterminate;\n      this.checked = oldChecked;\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue(): void {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  @Watch('checked')\n  watchCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    let toggleText = this.textOff;\n\n    if (this.checked) {\n      toggleText = this.textOn;\n    }\n\n    if (this.indeterminate) {\n      toggleText = this.textIndeterminate;\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <label class=\"wrapper\">\n          <button\n            role=\"switch\"\n            aria-checked={a11yBoolean(this.checked)}\n            class={{\n              switch: true,\n              checked: this.checked,\n              indeterminate: this.indeterminate,\n            }}\n            onClick={() => this.onCheckedChange(!this.checked)}\n          >\n            <div class=\"slider\"></div>\n          </button>\n          <input\n            type=\"checkbox\"\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            checked={this.checked}\n            tabindex={0}\n            aria-hidden={a11yBoolean(true)}\n            aria-checked={a11yBoolean(this.checked)}\n            onChange={(event) =>\n              this.onCheckedChange((event.target as HTMLInputElement).checked)\n            }\n          />\n          {!this.hideText && (\n            <ix-typography class=\"label\">{toggleText}</ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,ood,MCiCLC,EAAM,MANnB,WAAAC,CAAAC,G,4QAmB2BC,KAAKC,MAAW,KAKDD,KAAOE,QAAG,MAK1CF,KAAQG,SAAG,MAKqBH,KAAaI,cAAG,MAKhDJ,KAAMK,OAAG,KAKTL,KAAOM,QAAG,MAKVN,KAAiBO,kBAAG,QAKpBP,KAAQQ,SAAG,MAOMR,KAAQS,SAAG,KA6GrC,CAnGC,eAAAC,CAAgBC,GACd,GAAIX,KAAKG,SAAU,CACjB,M,CAGF,MAAMS,EAAmBZ,KAAKI,cAC9B,MAAMS,EAAab,KAAKE,QAExB,GAAIF,KAAKI,cAAe,CACtBJ,KAAKI,cAAgB,K,CAGvBJ,KAAKE,QAAUS,EAEf,MAAMG,iBAAEA,GAAqBd,KAAKe,cAAcC,KAAKhB,KAAKE,SAE1D,GAAIY,EAAkB,CACpBd,KAAKI,cAAgBQ,EACrBZ,KAAKE,QAAUW,C,EAInB,iBAAAI,GACEjB,KAAKkB,yB,CAGP,uBAAAA,GACE,GAAIlB,KAAKE,QAAS,CAChBF,KAAKmB,cAAcC,aAAapB,KAAKC,M,KAChC,CACLD,KAAKmB,cAAcC,aAAa,K,EAKpC,kBAAAC,GACErB,KAAKkB,yB,CAKP,aAAAI,GACE,OAAOC,QAAQC,QAAQxB,KAAKE,Q,CAK9B,wBAAAuB,GACE,OAAOF,QAAQC,QAAQxB,KAAKmB,cAAcO,K,CAG5C,MAAAC,GACE,IAAIC,EAAa5B,KAAKM,QAEtB,GAAIN,KAAKE,QAAS,CAChB0B,EAAa5B,KAAKK,M,CAGpB,GAAIL,KAAKI,cAAe,CACtBwB,EAAa5B,KAAKO,iB,CAEpB,OACEsB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL7B,SAAUH,KAAKG,WAGjB0B,EAAO,SAAAE,IAAA,2CAAAC,MAAM,WACXH,EAAA,UAAAE,IAAA,2CACEE,KAAK,SAAQ,eACCC,EAAYlC,KAAKE,SAC/B8B,MAAO,CACLG,OAAQ,KACRjC,QAASF,KAAKE,QACdE,cAAeJ,KAAKI,eAEtBgC,QAAS,IAAMpC,KAAKU,iBAAiBV,KAAKE,UAE1C2B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YAEbH,EACE,SAAAE,IAAA,2CAAAM,KAAK,WACLlC,SAAUH,KAAKG,SACfC,cAAeJ,KAAKI,cACpBF,QAASF,KAAKE,QACdoC,SAAU,EACG,cAAAJ,EAAY,MACX,eAAAA,EAAYlC,KAAKE,SAC/BqC,SAAWC,GACTxC,KAAKU,gBAAiB8B,EAAMC,OAA4BvC,YAG1DF,KAAKQ,UACLqB,EAAA,iBAAAE,IAAA,2CAAeC,MAAM,SAASJ,I","ignoreList":[]}

package/dist/siemens-ix/p-8920bbfe.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as a,H as r,g as i}from"./p-DtF9fwpD.js";import{U as s}from"./p-BGzrnl_l.js";import{c as o,i as l}from"./p-CrTP-icT.js";import{b as n}from"./p-Bb7pDeaQ.js";const h=":host{display:block;min-height:4rem;height:4rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";var d=undefined&&undefined.__rest||function(e,t){var a={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0)a[r]=e[r];if(e!=null&&typeof Object.getOwnPropertySymbols==="function")for(var i=0,r=Object.getOwnPropertySymbols(e);i<r.length;i++){if(t.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(e,r[i]))a[r[i]]=e[r[i]]}return a};const c=class{get inputElement(){return this.hostElement.shadowRoot.querySelector("#upload-browser")}constructor(a){e(this,a);this.filesChanged=t(this,"filesChanged",7);this.multiple=false;this.multiline=false;this.disabled=false;this.state=s.SELECT_FILE;this.selectFileText="+ Drag files here or…";this.loadingText="Checking files…";this.uploadFailedText="Upload failed. Please try again.";this.uploadSuccessText="Upload successful";this.i18nUploadFile="Upload file…";this.i18nUploadDisabled="File upload currently not possible.";this.isFileOver=false;this.a11y={}}componentWillLoad(){this.a11y=n(this.hostElement)}fileDropped(e){e.preventDefault();if(this.disabled){return}if(!e.dataTransfer){return}const t=e.dataTransfer.files;this.isFileOver=false;this.filesToUpload=this.convertToFileArray(t);this.filesChanged.emit(this.filesToUpload)}fileOver(e){if(!e.dataTransfer){return}if(this.state!==s.LOADING){e.preventDefault();e.dataTransfer.dropEffect="move"}if(!this.multiple&&e.dataTransfer.items.length>1){e.preventDefault();e.stopPropagation();e.dataTransfer.effectAllowed="none";e.dataTransfer.dropEffect="none"}else{this.isFileOver=true}}fileLeave(){this.isFileOver=false}fileChangeEvent(e){if(this.disabled){return}if(!e.target){return}this.filesToUpload=this.convertToFileArray(e.target.files);this.filesChanged.emit(this.filesToUpload);this.inputElement.type="";this.inputElement.type="file"}convertToFileArray(e){let t=[];if(!e){return[]}if(e instanceof FileList){t=Array.from(e)}else{t=[e]}return t}renderUploadState(){if(this.disabled){return a("span",{class:"state"},a("span",{class:"upload-text"},this.i18nUploadDisabled))}switch(this.state){case s.SELECT_FILE:return a("span",{class:"state"},a("span",{class:"upload-text"},this.selectFileText));case s.LOADING:return a("span",{class:"state"},a("ix-spinner",{variant:"primary"}),a("span",{class:"upload-text"},this.loadingText));case s.UPLOAD_FAILED:return a("span",{class:"state"},a("ix-icon",{name:l,class:"icon-error"}),a("span",{class:"upload-text"},this.uploadFailedText));case s.UPLOAD_SUCCESSED:return a("span",{class:"state"},a("ix-icon",{name:o,class:"icon-success"}),a("span",{class:"upload-text"},this.uploadSuccessText));default:return""}}async setFilesToUpload(e){this.filesToUpload=e}render(){const e=this.disabled||this.state===s.LOADING;const t=this.a11y,{"aria-label":i="Upload files"}=t,o=d(t,["aria-label"]);return a(r,Object.assign({key:"2c5f628e52e7b1a591a5372adbe851f3ef558f06"},o,{"aria-disabled":e}),a("div",{key:"26c7e62a920f6ee6101cad27df95650ae20bedc1",class:{"file-upload-area":true,"file-over":this.state!==s.LOADING&&this.isFileOver,checking:this.state===s.LOADING,disabled:this.disabled,multiline:this.multiline},onDrop:e=>{if(this.state!==s.LOADING){this.fileDropped(e)}},onDragOver:e=>this.fileOver(e),onDragLeave:()=>this.fileLeave(),draggable:!this.disabled},this.renderUploadState(),a("div",{key:"9b32b9d0e31bd04b158bdd2b1229cdb559373105"},a("input",{key:"1555820542f19528482cf133c10abe8780cc340d","aria-label":i,"aria-disabled":e,multiple:this.multiple,type:"file",class:"upload-browser",id:"upload-browser",onChange:e=>{this.fileChangeEvent(e)},accept:this.accept,disabled:e}),a("ix-button",{key:"e87fa10eed53a6542eb5e551fa9110b593ba4b3a",tabindex:"-1",outline:true,onClick:()=>this.inputElement.click(),disabled:e},this.i18nUploadFile))))}get hostElement(){return i(this)}};c.style=h;export{c as ix_upload};
+//# sourceMappingURL=p-8920bbfe.entry.js.map

package/dist/siemens-ix/p-8920bbfe.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["uploadCss","Upload","inputElement","this","hostElement","shadowRoot","querySelector","constructor","hostRef","multiple","multiline","disabled","state","UploadFileState","SELECT_FILE","selectFileText","loadingText","uploadFailedText","uploadSuccessText","i18nUploadFile","i18nUploadDisabled","isFileOver","a11y","componentWillLoad","a11yHostAttributes","fileDropped","evt","preventDefault","dataTransfer","file","files","filesToUpload","convertToFileArray","filesChanged","emit","fileOver","event","LOADING","dropEffect","items","length","stopPropagation","effectAllowed","fileLeave","fileChangeEvent","target","type","filesFromEvent","FileList","Array","from","renderUploadState","h","class","variant","UPLOAD_FAILED","name","iconError","UPLOAD_SUCCESSED","iconSuccess","setFilesToUpload","obj","render","_a","ariaLabel","__rest","Host","Object","assign","key","checking","onDrop","e","onDragOver","onDragLeave","draggable","id","onChange","accept","tabindex","outline","onClick","click"],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.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 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: block;\n  min-height: 4rem;\n  height: 4rem;\n\n  .file-upload-area {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n\n    overflow: hidden;\n\n    height: 100%;\n    width: 100%;\n\n    padding: $default-space;\n\n    border: 1px dashed var(--theme-upload--border-color);\n    border-radius: var(--theme-upload--border-radius);\n    color: var(--theme-upload-text--color);\n\n    &.multiline {\n      max-height: unset;\n      height: auto;\n\n      .glyph {\n        align-self: flex-start;\n        margin-block-start: 3px;\n      }\n\n      > div {\n        align-self: flex-start;\n      }\n    }\n\n    &:not(.multiline) {\n      .state,\n      .upload-text {\n        @include ellipsis;\n      }\n    }\n\n    &:not(.disabled).file-over {\n      border-color: var(--theme-upload--border-color--dragover);\n      border-style: solid;\n    }\n\n    &.checking {\n      color: var(--theme-upload-text--color--checking);\n      border-style: solid;\n    }\n\n    &.disabled {\n      border-style: solid;\n      color: var(--theme-upload-text--color--disabled);\n    }\n\n    ix-button {\n      margin-inline-start: $default-space;\n    }\n\n    .upload-browser {\n      border: 0;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n    }\n\n    .loader {\n      margin: 2.187rem auto;\n      font-size: 0.937rem;\n      width: $default-space;\n      height: $default-space;\n      border-radius: 50%;\n      position: relative;\n      text-indent: -9999em;\n      animation: optimise-loading 1.1s infinite ease;\n      transform: translateZ(0);\n    }\n\n    .upload-filename {\n      margin-bottom: $default-space;\n    }\n\n    .state {\n      display: flex;\n      align-items: center;\n\n      > ix-spinner {\n        margin-inline-end: $small-space;\n      }\n\n      > ix-icon {\n        margin-inline-end: $small-space;\n\n        &.icon-error {\n          color: var(--theme-color-alarm);\n        }\n\n        &.icon-success {\n          color: var(--theme-color-success);\n        }\n      }\n    }\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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 { UploadFileState } from './upload-file-state';\nimport { iconError, iconSuccess } from '@siemens/ix-icons/icons';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-upload',\n  styleUrl: 'upload.scss',\n  shadow: true,\n})\nexport class Upload {\n  /**\n   * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n   * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n   */\n  @Prop() accept?: string;\n\n  /**\n   * If multiple is true the user can drop or select multiple files\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Whether the text should wrap to more than one line\n   */\n  @Prop() multiline = false;\n\n  /**\n   * Disable all input events\n   */\n  @Prop() disabled = false;\n\n  /**\n   * After a file is uploaded you can set the upload component to a defined state\n   */\n  @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n  /**\n   * Will be used by state = UploadFileState.SELECT_FILE\n   */\n  @Prop() selectFileText = '+ Drag files here or…';\n\n  /**\n   * Will be used by state = UploadFileState.LOADING\n   */\n  @Prop() loadingText = 'Checking files…';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_FAILED\n   */\n  @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n  /**\n   * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n   */\n  @Prop() uploadSuccessText = 'Upload successful';\n\n  /**\n   * Label for upload file button\n   */\n  @Prop() i18nUploadFile = 'Upload file…';\n\n  /**\n   * Text for disabled state\n   */\n  @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n  /**\n   * You get an array of Files after drop-action or browse action is finished\n   */\n  @Event() filesChanged!: EventEmitter<Array<File>>;\n\n  @Element() hostElement!: HTMLIxUploadElement;\n\n  get inputElement(): HTMLInputElement {\n    return this.hostElement.shadowRoot!.querySelector('#upload-browser')!;\n  }\n\n  @State() isFileOver = false;\n\n  private filesToUpload?: Array<File>;\n\n  private a11y: A11yAttributes = {};\n\n  constructor() {}\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement);\n  }\n\n  private fileDropped(evt: DragEvent) {\n    evt.preventDefault();\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!evt.dataTransfer) {\n      return;\n    }\n\n    const file: File | FileList = evt.dataTransfer.files;\n    this.isFileOver = false;\n\n    this.filesToUpload = this.convertToFileArray(file);\n    this.filesChanged.emit(this.filesToUpload);\n  }\n\n  private fileOver(event: DragEvent) {\n    if (!event.dataTransfer) {\n      return;\n    }\n\n    if (this.state !== UploadFileState.LOADING) {\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    if (!this.multiple && event.dataTransfer.items.length > 1) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.dataTransfer.effectAllowed = 'none';\n      event.dataTransfer.dropEffect = 'none';\n    } else {\n      this.isFileOver = true;\n    }\n  }\n\n  private fileLeave() {\n    this.isFileOver = false;\n  }\n\n  private fileChangeEvent(event: Event) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (!event.target) {\n      return;\n    }\n\n    this.filesToUpload = this.convertToFileArray(\n      (event.target as HTMLInputElement).files\n    );\n\n    this.filesChanged.emit(this.filesToUpload);\n\n    // Workaround for bug in native input element, that prevents the user from uploading\n    // a file with the same name as the most recent one, but with changed content.\n    this.inputElement.type = '';\n    this.inputElement.type = 'file';\n  }\n\n  private convertToFileArray(filesFromEvent: FileList | File | null): File[] {\n    let files = [];\n\n    if (!filesFromEvent) {\n      return [];\n    }\n\n    if (filesFromEvent instanceof FileList) {\n      files = Array.from(filesFromEvent);\n    } else {\n      files = [filesFromEvent];\n    }\n    return files;\n  }\n\n  private renderUploadState() {\n    if (this.disabled) {\n      return (\n        <span class=\"state\">\n          <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n        </span>\n      );\n    }\n\n    switch (this.state) {\n      case UploadFileState.SELECT_FILE:\n        return (\n          <span class=\"state\">\n            <span class=\"upload-text\">{this.selectFileText}</span>\n          </span>\n        );\n      case UploadFileState.LOADING:\n        return (\n          <span class=\"state\">\n            <ix-spinner variant=\"primary\"></ix-spinner>\n            <span class=\"upload-text\">{this.loadingText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_FAILED:\n        return (\n          <span class=\"state\">\n            <ix-icon name={iconError} class=\"icon-error\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadFailedText}</span>\n          </span>\n        );\n      case UploadFileState.UPLOAD_SUCCESSED:\n        return (\n          <span class=\"state\">\n            <ix-icon name={iconSuccess} class=\"icon-success\"></ix-icon>\n            <span class=\"upload-text\">{this.uploadSuccessText}</span>\n          </span>\n        );\n      default:\n        return '';\n    }\n  }\n\n  /**\n   * Set files\n   * @param obj\n   */\n  @Method()\n  async setFilesToUpload(obj: any) {\n    this.filesToUpload = obj;\n  }\n\n  render() {\n    const disabled = this.disabled || this.state === UploadFileState.LOADING;\n    const { 'aria-label': ariaLabel = 'Upload files', ...a11y } = this.a11y;\n    return (\n      <Host {...a11y} aria-disabled={disabled}>\n        <div\n          class={{\n            'file-upload-area': true,\n            'file-over':\n              this.state !== UploadFileState.LOADING && this.isFileOver,\n            checking: this.state === UploadFileState.LOADING,\n            disabled: this.disabled,\n            multiline: this.multiline,\n          }}\n          onDrop={(e) => {\n            if (this.state !== UploadFileState.LOADING) {\n              this.fileDropped(e);\n            }\n          }}\n          onDragOver={(e) => this.fileOver(e)}\n          onDragLeave={() => this.fileLeave()}\n          draggable={!this.disabled}\n        >\n          {this.renderUploadState()}\n          <div>\n            <input\n              aria-label={ariaLabel}\n              aria-disabled={disabled}\n              multiple={this.multiple}\n              type=\"file\"\n              class=\"upload-browser\"\n              id=\"upload-browser\"\n              onChange={(e) => {\n                this.fileChangeEvent(e);\n              }}\n              accept={this.accept}\n              disabled={disabled}\n            />\n            <ix-button\n              tabindex=\"-1\"\n              outline\n              onClick={() => this.inputElement.click()}\n              disabled={disabled}\n            >\n              {this.i18nUploadFile}\n            </ix-button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}