@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

package/dist/siemens-ix/{p-cf546284.entry.js.map → p-ae7fdfa6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["colCss","IxColStyle0","Col","onResize","forceUpdate","this","getSize","breakpoint","size","sizeSm","sizeMd","sizeLg","getColumnSize","Breakpoints","forEach","isMediaQueryActive","matchBreakpoint","currentSize","getColumnSizeStyling","flex","width","colSize","render","h","Host","key","style","Object","assign","datePickerCss","IxDatePickerStyle0","DatePicker","DAYS_IN_WEEK","undefined","DateTime","now","toISO","watchFromPropHandler","newValue","currFromDate","fromFormat","format","_a","isValid","selectedYear","year","selectedMonth","month","watchToPropHandler","currToDate","onLocaleChange","setTranslations","getCurrentDate","_from","_b","toFormat","_to","_c","_d","range","from","to","handleKeyUp","event","isDayFocus","_focusedDay","focusedDay","getDaysInCurrentMonth","changeToAdjacentMonth","monthChangedFromFocus","utc","daysInMonth","getDateTimeNow","fromISO","today","onDayBlur","onDayFocus","componentWillLoad","startYear","endYear","tempMonth","tempYear","componentWillRender","calculateCalendar","componentDidRender","dayElem","hostElement","shadowRoot","querySelector","focus","dayNames","rotateWeekDayNames","Info","weekdays","locale","weekStartIndex","monthNames","months","index","clone","len","length","push","splice","onDone","date","dateSelect","emit","calendar","monthStart","startOf","monthEnd","endOf","startWeek","weekNumber","endWeek","monthStartWeekDayIndex","weekday","monthEndWeekDayIndex","monthStartWeekDayName","findIndex","d","monthEndWeekDayName","correctLastWeek","weeksInWeekYear","correctFirstWeek","currDayNumber","weekIndex","daysArr","j","dayNumbers","selectTempYear","stopPropagation","focusMonth","firstMonthRef","infiniteScrollYears","scroll","yearContainerRef","scrollTop","maxScroll","scrollHeight","atTop","atBottom","Math","round","offsetHeight","limit","first","firstElementChild","scrollTo","offsetTop","last","lastElementChild","selectMonth","show","number","selectDay","selectedDay","fromJSDate","Date","onDateChange","then","dateChange","dateRangeChange","getDayClasses","day","todayObj","selectedDayObj","hasSame","selected","disabled","isWithinMinMaxDate","isWithinMinMaxYear","minDateYear","minDate","maxDateYear","maxDate","isBefore","isAfter","isWithinMinMaxMonth","minDateObj","maxDateObj","minDateMonth","maxDateMonth","_minDate","_maxDate","renderYears","rows","class","arrowYear","onClick","onKeyUp","tabIndex","hidden","arrowPosition","name","corners","standaloneAppearance","slot","ghost","icon","variant","ref","dropdownButtonRef","trigger","ignoreRelatedSubmenu","placement","onScroll","map","checkPosition","slice","week","Fragment","id","e","onFocus","onBlur","button","textSelectDate","i18nDone","__decorate","OnListener","layoutGridCss","IxLayoutGridStyle0","LayoutGrid","noMargin","columns","gap","rowCss","IxRowStyle0","Row"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx","src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/grid/layout-grid.tsx","src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize() {\n    let size: ColumnSize;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 22rem;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .disabled-item {\n    pointer-events: none;\n    background-color: var(--theme-datepicker-day--background--disabled);\n    color: var(--theme-datepicker-day--color--disabled);\n    cursor: default;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .month-dropdown-item {\n      margin-left: 4px;\n      margin-right: 4px;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(8, 40px);\n    grid-template-rows: repeat(7, 40px);\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n                            --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n                            --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n                            --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n            var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n                            --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n                            --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n                            --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n                          --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n                          --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n                          --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n                          --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n                          --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n                          --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-weekday--color);\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &:focus-visible {\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n        var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nimport { DateTime, Info } from 'luxon';\nimport { OnListener } from '../utils/listener';\n\nexport type DateChangeEvent = {\n  from: string;\n  to: string;\n};\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\ninterface CalendarWeek {\n  weekNumber: number;\n  dayNumbers: number[];\n}\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker {\n  @Element() hostElement: HTMLIxDatePickerElement;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  @Watch('from')\n  watchFromPropHandler(newValue: string) {\n    this.currFromDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currFromDate?.isValid) {\n      this.selectedYear = this.currFromDate.year;\n      this.selectedMonth = this.currFromDate.month - 1;\n    }\n  }\n\n  /**\n   * The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\n\n  @Watch('to')\n  watchToPropHandler(newValue: string) {\n    this.currToDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currToDate?.isValid) {\n      this.selectedYear = this.currToDate.year;\n      this.selectedMonth = this.currToDate.month - 1;\n    }\n  }\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Text of the button that confirms date selection.\n   *\n   * @since 1.1.0\n   * @deprecated since 2.1.0. Use `i18nDone`\n   */\n  @Prop() textSelectDate: string;\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\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 2.1.0\n   */\n  @Prop() locale: string = undefined;\n  @Watch('locale')\n  onLocaleChange() {\n    this.setTranslations();\n  }\n\n  /**\n   * @deprecated Not supported since 2.0.0.\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   * @deprecated Not used anymore see `this.dateChange`\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /** @internal */\n  @Prop() standaloneAppearance = true;\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * Triggers if the date selection changes.\n   * Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`\n   *\n   * @since 2.1.0\n   */\n  @Event() dateChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Triggers if the date selection changes.\n   * Only triggered if date-picker-rework is in range mode.\n   *\n   * @since 2.1.0\n   */\n  @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @deprecated NOT getting dispatched after 2.0.0. Use `dateSelect`.\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Get the currently selected date-range.\n   */\n  @Method()\n  async getCurrentDate() {\n    const _from = this.currFromDate?.isValid\n      ? this.currFromDate?.toFormat(this.format)\n      : undefined;\n    const _to = this.currToDate?.isValid\n      ? this.currToDate?.toFormat(this.format)\n      : undefined;\n\n    if (this.range) {\n      return {\n        from: _from,\n        to: _to,\n      };\n    }\n\n    return {\n      from: _from,\n      to: undefined,\n    };\n  }\n\n  @State() currFromDate: DateTime;\n  @State() currToDate: DateTime;\n\n  @State() selectedYear: number;\n  @State() tempYear: number;\n  @State() startYear: number;\n  @State() endYear: number;\n  @State() selectedMonth: number;\n  @State() tempMonth: number;\n\n  @State() dropdownButtonRef: HTMLElement;\n  @State() yearContainerRef: HTMLElement;\n\n  @State() dayNames: string[];\n  @State() monthNames: string[];\n  @State() firstMonthRef: HTMLElement;\n  @State() focusedDay: number = 1;\n  @State() focusedDayElem: HTMLElement;\n\n  private isDayFocus: boolean;\n  private monthChangedFromFocus: boolean;\n  private readonly DAYS_IN_WEEK = 7;\n  private calendar: CalendarWeek[];\n\n  @OnListener<DatePicker>('keydown')\n  handleKeyUp(event: KeyboardEvent) {\n    if (!this.isDayFocus) {\n      return;\n    }\n\n    let _focusedDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        _focusedDay--;\n        break;\n      case 'ArrowRight':\n        _focusedDay++;\n        break;\n      case 'ArrowUp':\n        _focusedDay = _focusedDay - 7;\n        break;\n      case 'ArrowDown':\n        _focusedDay = _focusedDay + 7;\n        break;\n      default:\n        return;\n    }\n\n    if (_focusedDay > this.getDaysInCurrentMonth()) {\n      _focusedDay = _focusedDay - this.getDaysInCurrentMonth();\n      this.changeToAdjacentMonth(1);\n      this.monthChangedFromFocus = true;\n    } else if (_focusedDay < 1) {\n      this.changeToAdjacentMonth(-1);\n      _focusedDay = _focusedDay + this.getDaysInCurrentMonth();\n      this.monthChangedFromFocus = true;\n    }\n\n    this.focusedDay = _focusedDay;\n  }\n\n  private getDaysInCurrentMonth(): number {\n    return DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth;\n  }\n\n  private getDateTimeNow() {\n    return DateTime.fromISO(this.today);\n  }\n\n  onDayBlur() {\n    this.isDayFocus = false;\n  }\n\n  onDayFocus() {\n    this.isDayFocus = true;\n  }\n\n  componentWillLoad() {\n    this.setTranslations();\n\n    this.currFromDate = this.from\n      ? DateTime.fromFormat(this.from, this.format)\n      : undefined;\n    this.currToDate = this.to\n      ? DateTime.fromFormat(this.to, this.format)\n      : undefined;\n\n    const year = this.currFromDate?.year ?? this.getDateTimeNow().year;\n    this.startYear = year - 5;\n    this.endYear = year + 5;\n\n    this.selectedMonth =\n      (this.currFromDate?.month ?? this.getDateTimeNow().month) - 1;\n    this.selectedYear = year;\n    this.tempMonth = this.selectedMonth;\n    this.tempYear = this.selectedYear;\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  componentDidRender() {\n    if (!this.monthChangedFromFocus && !this.isDayFocus) {\n      return;\n    }\n\n    const dayElem = this.hostElement.shadowRoot.querySelector(\n      `[id=day-cell-${this.focusedDay}]`\n    ) as HTMLElement;\n    dayElem.focus();\n  }\n\n  private setTranslations() {\n    this.dayNames = this.rotateWeekDayNames(\n      Info.weekdays('long', {\n        locale: this.locale,\n      }),\n      this.weekStartIndex\n    );\n\n    this.monthNames = Info.months('long', {\n      locale: this.locale,\n    });\n  }\n\n  /**\n   * Rotate the WeekdayNames array.\n   * Based on the position that should be the new 0-index.\n   */\n  private rotateWeekDayNames(weekdays: string[], index: number): string[] {\n    const clone = [...weekdays];\n\n    if (index === 0) {\n      return clone;\n    }\n\n    index = -index;\n    const len = weekdays.length;\n\n    clone.push(...clone.splice(0, ((-index % len) + len) % len));\n    return clone;\n  }\n\n  private async onDone() {\n    const date = await this.getCurrentDate();\n    this.dateSelect.emit(date);\n  }\n\n  private calculateCalendar() {\n    const calendar: CalendarWeek[] = [];\n    const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);\n    const monthStart = month.startOf('month');\n    const monthEnd = month.endOf('month');\n    let startWeek = monthStart.weekNumber;\n    let endWeek = monthEnd.weekNumber;\n    let monthStartWeekDayIndex = monthStart.weekday - 1;\n    let monthEndWeekDayIndex = monthEnd.weekday - 1;\n\n    if (this.weekStartIndex !== 0) {\n      // Find the positions where to start/stop counting the day-numbers based on which day the week starts\n      const weekdays = Info.weekdays();\n      const monthStartWeekDayName = weekdays[monthStart.weekday];\n\n      monthStartWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthStartWeekDayName\n      );\n      const monthEndWeekDayName = weekdays[monthEnd.weekday];\n      monthEndWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthEndWeekDayName\n      );\n    }\n\n    let correctLastWeek = false;\n    if (endWeek === 1) {\n      endWeek = monthEnd.weeksInWeekYear + 1;\n      correctLastWeek = true;\n    }\n\n    let correctFirstWeek = false;\n    if (startWeek === monthStart.weeksInWeekYear) {\n      startWeek = 1;\n      endWeek++;\n\n      correctFirstWeek = true;\n    }\n\n    let currDayNumber = 1;\n    for (\n      let weekIndex = startWeek;\n      weekIndex <= endWeek && currDayNumber <= 31;\n      weekIndex++\n    ) {\n      const daysArr: number[] = [];\n\n      for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {\n        // Display empty cells until the calender starts/has ended\n        if (\n          (weekIndex === startWeek && j < monthStartWeekDayIndex) ||\n          (weekIndex === endWeek && j > monthEndWeekDayIndex)\n        ) {\n          daysArr.push(undefined);\n        } else {\n          daysArr.push(currDayNumber++);\n        }\n      }\n\n      if (correctFirstWeek || correctLastWeek) {\n        if (weekIndex === 1) {\n          calendar.push({\n            weekNumber: monthStart.weeksInWeekYear,\n            dayNumbers: daysArr,\n          });\n        } else if (weekIndex === monthEnd.weekNumber) {\n          calendar.push({\n            weekNumber: 1,\n            dayNumbers: daysArr,\n          });\n        } else {\n          calendar.push({\n            weekNumber: weekIndex - 1,\n            dayNumbers: daysArr,\n          });\n        }\n        continue;\n      }\n\n      calendar.push({\n        weekNumber: weekIndex,\n        dayNumbers: daysArr,\n      });\n    }\n\n    this.calendar = calendar;\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event?.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private focusMonth() {\n    this.firstMonthRef.focus();\n  }\n\n  private infiniteScrollYears() {\n    const scroll = this.yearContainerRef.scrollTop;\n    const maxScroll = this.yearContainerRef.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      Math.round(scroll + this.yearContainerRef.offsetHeight) >= maxScroll;\n    const limit = 200;\n\n    if (this.endYear - this.startYear > limit) return;\n\n    if (atTop) {\n      const first = this.yearContainerRef.firstElementChild as HTMLElement;\n      this.startYear -= 5;\n      this.yearContainerRef.scrollTo(0, first.offsetTop);\n\n      return;\n    }\n\n    if (atBottom) {\n      const last = this.yearContainerRef.lastElementChild as HTMLElement;\n      this.endYear += 5;\n      this.yearContainerRef.scrollTo(0, last.offsetTop);\n    }\n  }\n\n  private selectMonth(month: number) {\n    this.selectedMonth = month;\n    this.selectedYear = this.tempYear;\n    this.tempMonth = month;\n\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private changeToAdjacentMonth(number: -1 | 1) {\n    if (this.selectedMonth + number < 0) {\n      this.selectedYear--;\n      this.selectedMonth = 11;\n    } else if (this.selectedMonth + number > 11) {\n      this.selectedYear++;\n      this.selectedMonth = 0;\n    } else {\n      this.selectedMonth += number;\n    }\n  }\n\n  private selectDay(selectedDay: number) {\n    const date = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, selectedDay)\n    );\n\n    if (!this.range || this.currFromDate === undefined) {\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Reset the range selection\n    if (this.currToDate !== undefined) {\n      this.currFromDate = date;\n      this.currToDate = undefined;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Swap from/to if the second date is before the current date\n    if (date < this.currFromDate) {\n      this.currToDate = this.currFromDate;\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Set the range normally\n    this.currToDate = date;\n    this.onDateChange();\n  }\n\n  private onDateChange() {\n    this.getCurrentDate().then((date) => {\n      this.dateChange.emit(date);\n      if (this.range) {\n        this.dateRangeChange.emit(date);\n      }\n    });\n  }\n\n  private getDayClasses(day: number): any {\n    if (!day) {\n      return;\n    }\n\n    const todayObj = this.getDateTimeNow();\n    const selectedDayObj = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, day)\n    );\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: todayObj.hasSame(selectedDayObj, 'day'),\n      selected:\n        this.currFromDate?.hasSame(selectedDayObj, 'day') ||\n        this.currToDate?.hasSame(selectedDayObj, 'day'),\n      range:\n        selectedDayObj.startOf('day') > this.currFromDate?.startOf('day') &&\n        this.currToDate !== undefined &&\n        selectedDayObj.startOf('day') < this.currToDate?.startOf('day'),\n      disabled: !this.isWithinMinMaxDate(selectedDayObj),\n    };\n  }\n\n  private isWithinMinMaxYear(year: number): boolean {\n    const minDateYear = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format).year\n      : undefined;\n    const maxDateYear = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format).year\n      : undefined;\n    const isBefore = minDateYear ? year < minDateYear : false;\n    const isAfter = maxDateYear ? year > maxDateYear : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxMonth(month: number): boolean {\n    const minDateObj = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const maxDateObj = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const minDateMonth = minDateObj?.month;\n    const maxDateMonth = maxDateObj?.month;\n    const isBefore = minDateMonth\n      ? this.tempYear === minDateObj.year && month < minDateMonth\n      : false;\n    const isAfter = maxDateMonth\n      ? this.tempYear === maxDateObj.year && month > maxDateMonth\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxDate(date: DateTime): boolean {\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const isBefore = _minDate\n      ? date.startOf('day') < _minDate.startOf('day')\n      : false;\n    const isAfter = _maxDate\n      ? date.startOf('day') > _maxDate.startOf('day')\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private renderYears(): any[] {\n    const rows = [];\n\n    for (let year = this.startYear; year <= this.endYear; year++) {\n      rows.push(\n        <div\n          key={year}\n          class={{\n            arrowYear: true,\n            'month-dropdown-item': true,\n            'disabled-item': !this.isWithinMinMaxYear(year),\n          }}\n          onClick={(event) => this.selectTempYear(event, year)}\n          onKeyUp={(event) => {\n            if (event.key === 'Enter') {\n              this.selectTempYear(null, year);\n              this.focusMonth();\n            }\n          }}\n          tabIndex={0}\n        >\n          <ix-icon\n            class={{\n              hidden: this.tempYear !== year,\n              arrowPosition: true,\n            }}\n            name=\"chevron-right\"\n            size=\"12\"\n          ></ix-icon>\n          <div style={{ 'min-width': 'max-content' }}>{`${year}`}</div>\n        </div>\n      );\n    }\n\n    return rows;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card\n          corners={this.corners}\n          standaloneAppearance={this.standaloneAppearance}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(-1)}\n              ghost\n              icon=\"chevron-left\"\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n            <div class=\"selector\">\n              <ix-button\n                ghost\n                ref={(ref) => (this.dropdownButtonRef = ref)}\n                data-testid=\"year-month-button\"\n              >\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.selectedMonth]} {this.selectedYear}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                data-testid=\"year-month-dropdown\"\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef}\n                ignoreRelatedSubmenu\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    data-testid=\"year-container\"\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={(ref) => (this.yearContainerRef = ref)}\n                  >\n                    {this.renderYears()}\n                  </div>\n                  <div class=\"overflow\" data-testid=\"month-container\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        ref={(ref) => {\n                          if (month === this.monthNames[0]) {\n                            this.firstMonthRef = ref as HTMLElement;\n                          }\n                        }}\n                        class={{\n                          arrowYear: true,\n                          'month-dropdown-item': true,\n                          selected:\n                            this.tempYear === this.selectedYear &&\n                            this.tempMonth === index,\n                          'disabled-item': !this.isWithinMinMaxMonth(index),\n                        }}\n                        onClick={() => this.selectMonth(index)}\n                        onKeyUp={(event) =>\n                          event.key === 'Enter' && this.selectMonth(index)\n                        }\n                        tabIndex={0}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden:\n                              this.tempYear !== this.selectedYear ||\n                              this.tempMonth !== index,\n                            checkPosition: true,\n                          }}\n                          name=\"single-check\"\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span class=\"capitalize monthMargin\">{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(1)}\n              ghost\n              icon=\"chevron-right\"\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n          <div class=\"grid\">\n            <div class=\"calendar-item week-day\"></div>\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                {name.slice(0, 3)}\n              </div>\n            ))}\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  <div class=\"calendar-item week-number\">{week.weekNumber}</div>\n                  {week.dayNumbers.map((day) => (\n                    <div\n                      key={day}\n                      id={`day-cell-${day}`}\n                      date-calender-day\n                      class={this.getDayClasses(day)}\n                      onClick={() => this.selectDay(day)}\n                      onKeyUp={(e) => e.key === 'Enter' && this.selectDay(day)}\n                      tabIndex={day === this.focusedDay ? 0 : -1}\n                      onFocus={() => this.onDayFocus()}\n                      onBlur={() => this.onDayBlur()}\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </Fragment>\n              );\n            })}\n          </div>\n          <div\n            class={{\n              button: true,\n              hidden: !this.range || !this.standaloneAppearance,\n            }}\n          >\n            <ix-button onClick={() => this.onDone()}>\n              {this.textSelectDate || this.i18nDone}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\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:host {\n  --ix-layout-grid-gutter: 24px;\n\n  display: block;\n  flex: 1 1 0%;\n  width: 100%;\n\n  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n  padding-left: 0;\n  padding-right: 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\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\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["colCss","IxColStyle0","Col","onResize","forceUpdate","this","getSize","breakpoint","size","sizeSm","sizeMd","sizeLg","getColumnSize","Breakpoints","forEach","isMediaQueryActive","matchBreakpoint","currentSize","getColumnSizeStyling","flex","width","colSize","render","h","Host","key","style","Object","assign","datePickerCss","IxDatePickerStyle0","DatePicker","DAYS_IN_WEEK","undefined","DateTime","now","toISO","watchFromPropHandler","newValue","currFromDate","fromFormat","format","_a","isValid","selectedYear","year","selectedMonth","month","watchToPropHandler","currToDate","onLocaleChange","setTranslations","getCurrentDate","_from","_b","toFormat","_to","_c","_d","range","from","to","handleKeyUp","event","isDayFocus","_focusedDay","focusedDay","getDaysInCurrentMonth","changeToAdjacentMonth","monthChangedFromFocus","utc","daysInMonth","getDateTimeNow","fromISO","today","onDayBlur","onDayFocus","componentWillLoad","startYear","endYear","tempMonth","tempYear","componentWillRender","calculateCalendar","componentDidRender","dayElem","hostElement","shadowRoot","querySelector","focus","dayNames","rotateWeekDayNames","Info","weekdays","locale","weekStartIndex","monthNames","months","index","clone","len","length","push","splice","onDone","date","dateSelect","emit","calendar","monthStart","startOf","monthEnd","endOf","startWeek","weekNumber","endWeek","monthStartWeekDayIndex","weekday","monthEndWeekDayIndex","monthStartWeekDayName","findIndex","d","monthEndWeekDayName","correctLastWeek","weeksInWeekYear","correctFirstWeek","currDayNumber","weekIndex","daysArr","j","dayNumbers","selectTempYear","stopPropagation","focusMonth","firstMonthRef","infiniteScrollYears","scroll","yearContainerRef","scrollTop","maxScroll","scrollHeight","atTop","atBottom","Math","round","offsetHeight","limit","first","firstElementChild","scrollTo","offsetTop","last","lastElementChild","selectMonth","show","number","selectDay","selectedDay","fromJSDate","Date","onDateChange","then","dateChange","dateRangeChange","getDayClasses","day","todayObj","selectedDayObj","hasSame","selected","disabled","isWithinMinMaxDate","isWithinMinMaxYear","minDateYear","minDate","maxDateYear","maxDate","isBefore","isAfter","isWithinMinMaxMonth","minDateObj","maxDateObj","minDateMonth","maxDateMonth","_minDate","_maxDate","renderYears","rows","class","arrowYear","onClick","onKeyUp","tabIndex","hidden","arrowPosition","name","corners","standaloneAppearance","slot","ghost","icon","variant","ref","dropdownButtonRef","trigger","ignoreRelatedSubmenu","placement","onScroll","map","checkPosition","slice","week","Fragment","id","e","onFocus","onBlur","button","textSelectDate","i18nDone","__decorate","OnListener","layoutGridCss","IxLayoutGridStyle0","LayoutGrid","noMargin","columns","gap","rowCss","IxRowStyle0","Row"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx","src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/grid/layout-grid.tsx","src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize() {\n    let size: ColumnSize;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 22rem;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .disabled-item {\n    pointer-events: none;\n    background-color: var(--theme-datepicker-day--background--disabled);\n    color: var(--theme-datepicker-day--color--disabled);\n    cursor: default;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .month-dropdown-item {\n      margin-left: 4px;\n      margin-right: 4px;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(8, 40px);\n    grid-template-rows: repeat(7, 40px);\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n                            --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n                            --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n                            --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n            var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n                            --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n                            --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n                            --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n                          --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n                          --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n                          --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n                          --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n                          --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n                          --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-weekday--color);\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &:focus-visible {\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n        var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nimport { DateTime, Info } from 'luxon';\nimport { OnListener } from '../utils/listener';\n\nexport type DateChangeEvent = {\n  from: string;\n  to: string;\n};\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\ninterface CalendarWeek {\n  weekNumber: number;\n  dayNumbers: number[];\n}\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker {\n  @Element() hostElement: HTMLIxDatePickerElement;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  @Watch('from')\n  watchFromPropHandler(newValue: string) {\n    this.currFromDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currFromDate?.isValid) {\n      this.selectedYear = this.currFromDate.year;\n      this.selectedMonth = this.currFromDate.month - 1;\n    }\n  }\n\n  /**\n   * The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\n\n  @Watch('to')\n  watchToPropHandler(newValue: string) {\n    this.currToDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currToDate?.isValid) {\n      this.selectedYear = this.currToDate.year;\n      this.selectedMonth = this.currToDate.month - 1;\n    }\n  }\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Text of the button that confirms date selection.\n   *\n   * @since 1.1.0\n   * @deprecated since 2.1.0. Use `i18nDone`\n   */\n  @Prop() textSelectDate: string;\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\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 2.1.0\n   */\n  @Prop() locale: string = undefined;\n  @Watch('locale')\n  onLocaleChange() {\n    this.setTranslations();\n  }\n\n  /**\n   * @deprecated Not supported since 2.0.0.\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   * @deprecated Not used anymore see `this.dateChange`\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /** @internal */\n  @Prop() standaloneAppearance = true;\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * Triggers if the date selection changes.\n   * Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`\n   *\n   * @since 2.1.0\n   */\n  @Event() dateChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Triggers if the date selection changes.\n   * Only triggered if date-picker-rework is in range mode.\n   *\n   * @since 2.1.0\n   */\n  @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @deprecated NOT getting dispatched after 2.0.0. Use `dateSelect`.\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Get the currently selected date-range.\n   */\n  @Method()\n  async getCurrentDate() {\n    const _from = this.currFromDate?.isValid\n      ? this.currFromDate?.toFormat(this.format)\n      : undefined;\n    const _to = this.currToDate?.isValid\n      ? this.currToDate?.toFormat(this.format)\n      : undefined;\n\n    if (this.range) {\n      return {\n        from: _from,\n        to: _to,\n      };\n    }\n\n    return {\n      from: _from,\n      to: undefined,\n    };\n  }\n\n  @State() currFromDate: DateTime;\n  @State() currToDate: DateTime;\n\n  @State() selectedYear: number;\n  @State() tempYear: number;\n  @State() startYear: number;\n  @State() endYear: number;\n  @State() selectedMonth: number;\n  @State() tempMonth: number;\n\n  @State() dropdownButtonRef: HTMLElement;\n  @State() yearContainerRef: HTMLElement;\n\n  @State() dayNames: string[];\n  @State() monthNames: string[];\n  @State() firstMonthRef: HTMLElement;\n  @State() focusedDay: number = 1;\n  @State() focusedDayElem: HTMLElement;\n\n  private isDayFocus: boolean;\n  private monthChangedFromFocus: boolean;\n  private readonly DAYS_IN_WEEK = 7;\n  private calendar: CalendarWeek[];\n\n  @OnListener<DatePicker>('keydown')\n  handleKeyUp(event: KeyboardEvent) {\n    if (!this.isDayFocus) {\n      return;\n    }\n\n    let _focusedDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        _focusedDay--;\n        break;\n      case 'ArrowRight':\n        _focusedDay++;\n        break;\n      case 'ArrowUp':\n        _focusedDay = _focusedDay - 7;\n        break;\n      case 'ArrowDown':\n        _focusedDay = _focusedDay + 7;\n        break;\n      default:\n        return;\n    }\n\n    if (_focusedDay > this.getDaysInCurrentMonth()) {\n      _focusedDay = _focusedDay - this.getDaysInCurrentMonth();\n      this.changeToAdjacentMonth(1);\n      this.monthChangedFromFocus = true;\n    } else if (_focusedDay < 1) {\n      this.changeToAdjacentMonth(-1);\n      _focusedDay = _focusedDay + this.getDaysInCurrentMonth();\n      this.monthChangedFromFocus = true;\n    }\n\n    this.focusedDay = _focusedDay;\n  }\n\n  private getDaysInCurrentMonth(): number {\n    return DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth;\n  }\n\n  private getDateTimeNow() {\n    return DateTime.fromISO(this.today);\n  }\n\n  onDayBlur() {\n    this.isDayFocus = false;\n  }\n\n  onDayFocus() {\n    this.isDayFocus = true;\n  }\n\n  componentWillLoad() {\n    this.setTranslations();\n\n    this.currFromDate = this.from\n      ? DateTime.fromFormat(this.from, this.format)\n      : undefined;\n    this.currToDate = this.to\n      ? DateTime.fromFormat(this.to, this.format)\n      : undefined;\n\n    const year = this.currFromDate?.year ?? this.getDateTimeNow().year;\n    this.startYear = year - 5;\n    this.endYear = year + 5;\n\n    this.selectedMonth =\n      (this.currFromDate?.month ?? this.getDateTimeNow().month) - 1;\n    this.selectedYear = year;\n    this.tempMonth = this.selectedMonth;\n    this.tempYear = this.selectedYear;\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  componentDidRender() {\n    if (!this.monthChangedFromFocus && !this.isDayFocus) {\n      return;\n    }\n\n    const dayElem = this.hostElement.shadowRoot.querySelector(\n      `[id=day-cell-${this.focusedDay}]`\n    ) as HTMLElement;\n    dayElem.focus();\n  }\n\n  private setTranslations() {\n    this.dayNames = this.rotateWeekDayNames(\n      Info.weekdays('long', {\n        locale: this.locale,\n      }),\n      this.weekStartIndex\n    );\n\n    this.monthNames = Info.months('long', {\n      locale: this.locale,\n    });\n  }\n\n  /**\n   * Rotate the WeekdayNames array.\n   * Based on the position that should be the new 0-index.\n   */\n  private rotateWeekDayNames(weekdays: string[], index: number): string[] {\n    const clone = [...weekdays];\n\n    if (index === 0) {\n      return clone;\n    }\n\n    index = -index;\n    const len = weekdays.length;\n\n    clone.push(...clone.splice(0, ((-index % len) + len) % len));\n    return clone;\n  }\n\n  private async onDone() {\n    const date = await this.getCurrentDate();\n    this.dateSelect.emit(date);\n  }\n\n  private calculateCalendar() {\n    const calendar: CalendarWeek[] = [];\n    const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);\n    const monthStart = month.startOf('month');\n    const monthEnd = month.endOf('month');\n    let startWeek = monthStart.weekNumber;\n    let endWeek = monthEnd.weekNumber;\n    let monthStartWeekDayIndex = monthStart.weekday - 1;\n    let monthEndWeekDayIndex = monthEnd.weekday - 1;\n\n    if (this.weekStartIndex !== 0) {\n      // Find the positions where to start/stop counting the day-numbers based on which day the week starts\n      const weekdays = Info.weekdays();\n      const monthStartWeekDayName = weekdays[monthStart.weekday];\n\n      monthStartWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthStartWeekDayName\n      );\n      const monthEndWeekDayName = weekdays[monthEnd.weekday];\n      monthEndWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthEndWeekDayName\n      );\n    }\n\n    let correctLastWeek = false;\n    if (endWeek === 1) {\n      endWeek = monthEnd.weeksInWeekYear + 1;\n      correctLastWeek = true;\n    }\n\n    let correctFirstWeek = false;\n    if (startWeek === monthStart.weeksInWeekYear) {\n      startWeek = 1;\n      endWeek++;\n\n      correctFirstWeek = true;\n    }\n\n    let currDayNumber = 1;\n    for (\n      let weekIndex = startWeek;\n      weekIndex <= endWeek && currDayNumber <= 31;\n      weekIndex++\n    ) {\n      const daysArr: number[] = [];\n\n      for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {\n        // Display empty cells until the calender starts/has ended\n        if (\n          (weekIndex === startWeek && j < monthStartWeekDayIndex) ||\n          (weekIndex === endWeek && j > monthEndWeekDayIndex)\n        ) {\n          daysArr.push(undefined);\n        } else {\n          daysArr.push(currDayNumber++);\n        }\n      }\n\n      if (correctFirstWeek || correctLastWeek) {\n        if (weekIndex === 1) {\n          calendar.push({\n            weekNumber: monthStart.weeksInWeekYear,\n            dayNumbers: daysArr,\n          });\n        } else if (weekIndex === monthEnd.weekNumber) {\n          calendar.push({\n            weekNumber: 1,\n            dayNumbers: daysArr,\n          });\n        } else {\n          calendar.push({\n            weekNumber: weekIndex - 1,\n            dayNumbers: daysArr,\n          });\n        }\n        continue;\n      }\n\n      calendar.push({\n        weekNumber: weekIndex,\n        dayNumbers: daysArr,\n      });\n    }\n\n    this.calendar = calendar;\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event?.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private focusMonth() {\n    this.firstMonthRef.focus();\n  }\n\n  private infiniteScrollYears() {\n    const scroll = this.yearContainerRef.scrollTop;\n    const maxScroll = this.yearContainerRef.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      Math.round(scroll + this.yearContainerRef.offsetHeight) >= maxScroll;\n    const limit = 200;\n\n    if (this.endYear - this.startYear > limit) return;\n\n    if (atTop) {\n      const first = this.yearContainerRef.firstElementChild as HTMLElement;\n      this.startYear -= 5;\n      this.yearContainerRef.scrollTo(0, first.offsetTop);\n\n      return;\n    }\n\n    if (atBottom) {\n      const last = this.yearContainerRef.lastElementChild as HTMLElement;\n      this.endYear += 5;\n      this.yearContainerRef.scrollTo(0, last.offsetTop);\n    }\n  }\n\n  private selectMonth(month: number) {\n    this.selectedMonth = month;\n    this.selectedYear = this.tempYear;\n    this.tempMonth = month;\n\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private changeToAdjacentMonth(number: -1 | 1) {\n    if (this.selectedMonth + number < 0) {\n      this.selectedYear--;\n      this.selectedMonth = 11;\n    } else if (this.selectedMonth + number > 11) {\n      this.selectedYear++;\n      this.selectedMonth = 0;\n    } else {\n      this.selectedMonth += number;\n    }\n  }\n\n  private selectDay(selectedDay: number) {\n    const date = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, selectedDay)\n    );\n\n    if (!this.range || this.currFromDate === undefined) {\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Reset the range selection\n    if (this.currToDate !== undefined) {\n      this.currFromDate = date;\n      this.currToDate = undefined;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Swap from/to if the second date is before the current date\n    if (date < this.currFromDate) {\n      this.currToDate = this.currFromDate;\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Set the range normally\n    this.currToDate = date;\n    this.onDateChange();\n  }\n\n  private onDateChange() {\n    this.getCurrentDate().then((date) => {\n      this.dateChange.emit(date);\n      if (this.range) {\n        this.dateRangeChange.emit(date);\n      }\n    });\n  }\n\n  private getDayClasses(day: number): any {\n    if (!day) {\n      return;\n    }\n\n    const todayObj = this.getDateTimeNow();\n    const selectedDayObj = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, day)\n    );\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: todayObj.hasSame(selectedDayObj, 'day'),\n      selected:\n        this.currFromDate?.hasSame(selectedDayObj, 'day') ||\n        this.currToDate?.hasSame(selectedDayObj, 'day'),\n      range:\n        selectedDayObj.startOf('day') > this.currFromDate?.startOf('day') &&\n        this.currToDate !== undefined &&\n        selectedDayObj.startOf('day') < this.currToDate?.startOf('day'),\n      disabled: !this.isWithinMinMaxDate(selectedDayObj),\n    };\n  }\n\n  private isWithinMinMaxYear(year: number): boolean {\n    const minDateYear = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format).year\n      : undefined;\n    const maxDateYear = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format).year\n      : undefined;\n    const isBefore = minDateYear ? year < minDateYear : false;\n    const isAfter = maxDateYear ? year > maxDateYear : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxMonth(month: number): boolean {\n    const minDateObj = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const maxDateObj = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const minDateMonth = minDateObj?.month;\n    const maxDateMonth = maxDateObj?.month;\n    const isBefore = minDateMonth\n      ? this.tempYear === minDateObj.year && month < minDateMonth\n      : false;\n    const isAfter = maxDateMonth\n      ? this.tempYear === maxDateObj.year && month > maxDateMonth\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxDate(date: DateTime): boolean {\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const isBefore = _minDate\n      ? date.startOf('day') < _minDate.startOf('day')\n      : false;\n    const isAfter = _maxDate\n      ? date.startOf('day') > _maxDate.startOf('day')\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private renderYears(): any[] {\n    const rows = [];\n\n    for (let year = this.startYear; year <= this.endYear; year++) {\n      rows.push(\n        <div\n          key={year}\n          class={{\n            arrowYear: true,\n            'month-dropdown-item': true,\n            'disabled-item': !this.isWithinMinMaxYear(year),\n          }}\n          onClick={(event) => this.selectTempYear(event, year)}\n          onKeyUp={(event) => {\n            if (event.key === 'Enter') {\n              this.selectTempYear(null, year);\n              this.focusMonth();\n            }\n          }}\n          tabIndex={0}\n        >\n          <ix-icon\n            class={{\n              hidden: this.tempYear !== year,\n              arrowPosition: true,\n            }}\n            name=\"chevron-right\"\n            size=\"12\"\n          ></ix-icon>\n          <div style={{ 'min-width': 'max-content' }}>{`${year}`}</div>\n        </div>\n      );\n    }\n\n    return rows;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card\n          corners={this.corners}\n          standaloneAppearance={this.standaloneAppearance}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(-1)}\n              ghost\n              icon=\"chevron-left\"\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n            <div class=\"selector\">\n              <ix-button\n                ghost\n                ref={(ref) => (this.dropdownButtonRef = ref)}\n                data-testid=\"year-month-button\"\n              >\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.selectedMonth]} {this.selectedYear}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                data-testid=\"year-month-dropdown\"\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef}\n                ignoreRelatedSubmenu\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    data-testid=\"year-container\"\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={(ref) => (this.yearContainerRef = ref)}\n                  >\n                    {this.renderYears()}\n                  </div>\n                  <div class=\"overflow\" data-testid=\"month-container\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        ref={(ref) => {\n                          if (month === this.monthNames[0]) {\n                            this.firstMonthRef = ref as HTMLElement;\n                          }\n                        }}\n                        class={{\n                          arrowYear: true,\n                          'month-dropdown-item': true,\n                          selected:\n                            this.tempYear === this.selectedYear &&\n                            this.tempMonth === index,\n                          'disabled-item': !this.isWithinMinMaxMonth(index),\n                        }}\n                        onClick={() => this.selectMonth(index)}\n                        onKeyUp={(event) =>\n                          event.key === 'Enter' && this.selectMonth(index)\n                        }\n                        tabIndex={0}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden:\n                              this.tempYear !== this.selectedYear ||\n                              this.tempMonth !== index,\n                            checkPosition: true,\n                          }}\n                          name=\"single-check\"\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span class=\"capitalize monthMargin\">{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(1)}\n              ghost\n              icon=\"chevron-right\"\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n          <div class=\"grid\">\n            <div class=\"calendar-item week-day\"></div>\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                {name.slice(0, 3)}\n              </div>\n            ))}\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  <div class=\"calendar-item week-number\">{week.weekNumber}</div>\n                  {week.dayNumbers.map((day) => (\n                    <div\n                      key={day}\n                      id={`day-cell-${day}`}\n                      date-calender-day\n                      class={this.getDayClasses(day)}\n                      onClick={() => this.selectDay(day)}\n                      onKeyUp={(e) => e.key === 'Enter' && this.selectDay(day)}\n                      tabIndex={day === this.focusedDay ? 0 : -1}\n                      onFocus={() => this.onDayFocus()}\n                      onBlur={() => this.onDayBlur()}\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </Fragment>\n              );\n            })}\n          </div>\n          <div\n            class={{\n              button: true,\n              hidden: !this.range || !this.standaloneAppearance,\n            }}\n          >\n            <ix-button onClick={() => this.onDone()}>\n              {this.textSelectDate || this.i18nDone}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\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:host {\n  --ix-layout-grid-gutter: 24px;\n\n  display: block;\n  flex: 1 1 0%;\n  width: 100%;\n\n  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n  padding-left: 0;\n  padding-right: 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\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\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-b0fe18f7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,F as o,H as s,g as a}from"./p-f86a894a.js";const i=":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-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 .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";const c=i;const l=class{constructor(r){e(this,r);this.selectedChanged=t(this,"selectedChanged",7);this.vertical=false;this.disabled=false;this.status="open";this.clickable=false;this.selected=false;this.position="undefined";this.iconName="circle";this.iconColor="workflow-step-icon-default--color"}selectedHandler(){const e=this.selected?"--selected":"";if(this.status==="open"){this.iconName=this.selected?"circle-dot":"circle";this.iconColor=`workflow-step-icon-default--color${e}`}if(this.status==="done"&&!this.disabled){this.iconColor=`workflow-step-icon-done--color${e}`}}watchPropHandler(){switch(this.status){case"open":this.iconName="circle";this.iconColor="workflow-step-icon-default--color";break;case"success":this.iconName="success";this.iconColor="color-success";break;case"done":this.iconName="success";this.iconColor="workflow-step-icon-done--color";break;case"warning":this.iconName="warning";this.iconColor="color-warning";break;case"error":this.iconName="error";this.iconColor="color-alarm";break;default:this.iconName="circle";break}if(this.disabled){this.iconColor="workflow-step-icon-success--color--disabled"}}componentWillLoad(){this.watchPropHandler();this.selectedHandler();this.customIconSlot=!!this.hostElement.querySelector('[slot="custom-icon"]')}onStepClick(){if(!this.disabled&&this.clickable){this.selectedChanged.emit(this.hostElement)}}render(){const e=!this.customIconSlot?r(o,null,r("ix-icon",{color:"color-1",name:this.iconName==="warning"?"triangle-filled":"circle-filled",class:"absolute",size:"24"}),r("ix-icon",{color:this.iconColor,name:this.iconName,class:"absolute",size:"24"})):null;return r(s,{key:"f955688afc40cfec2e7dc8e817608263393574bc",class:{"host-vertical":this.vertical},onClick:()=>this.onStepClick()},r("div",{key:"0044da6901febea340fa1c587b9176836d31ad1e",tabIndex:0,class:{step:true,selected:this.selected,vertical:this.vertical,disabled:this.disabled,clickable:this.clickable&&!this.disabled}},r("div",{key:"d88a6268a91385dccf888a1a47d0c96d93b1a0eb",class:"wrapper"},r("div",{key:"a83b9776004cdc76d624bf7dcad874a2a891644b",class:{line:true,selected:this.selected,[this.status]:true,[this.position]:true}}),r("div",{key:"f3eb2bbc583e40162cf1bf579d6a61945a41d819",class:"iconWrapper"},e,r("slot",{key:"34820c6841302866adb0beec34787aee6b54107d",name:"custom-icon"}))),r("div",{key:"2e2428021c4fc9b3308927c18287e7eb7263b1be",class:"text"},r("slot",{key:"595fa991bf3bfeeb4c4d9351763591b64a4bc6c3"}))))}get hostElement(){return a(this)}static get watchers(){return{selected:["selectedHandler"],disabled:["watchPropHandler"],status:["watchPropHandler"]}}};l.style=c;export{l as ix_workflow_step};
+//# sourceMappingURL=p-b0fe18f7.entry.js.map

package/dist/siemens-ix/p-b0fe18f7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["workflowStepCss","IxWorkflowStepStyle0","WorkflowStep","selectedHandler","selectedStyle","this","selected","status","iconName","iconColor","disabled","watchPropHandler","componentWillLoad","customIconSlot","hostElement","querySelector","onStepClick","clickable","selectedChanged","emit","render","icons","h","Fragment","color","name","class","size","Host","key","vertical","onClick","tabIndex","step","line","position"],"sources":["src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=shadow","src/components/workflow-step/workflow-step.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\n:host(:not(.host-vertical)) {\n  width: 12rem;\n  height: 4rem;\n  min-width: 2rem;\n  min-height: 4rem;\n  max-width: 12rem;\n}\n\n:host(.host-vertical) {\n  width: 100%;\n  height: 4rem;\n  min-width: 4rem;\n  min-height: 2rem;\n  max-height: 12rem;\n}\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    padding: 1.125rem 0 $small-space 0;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.single {\n          width: 0;\n        }\n\n        &.selected {\n          background-color: var(\n              --theme-workflow-step-icon-default--color--selected\n          );\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(\n                --theme-workflow-step-icon-done--color--selected\n            );\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: $default-space;\n      width: 100%;\n      padding: 0 $small-space;\n\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      text-align: center;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n      height: 100%;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 100%;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n\n          &.single {\n            width: 0;\n          }\n        }\n      }\n\n      .text {\n        margin: 0 $default-space;\n        padding: 0;\n        width: auto;\n      }\n    }\n\n    &.clickable {\n      &:hover {\n        background-color: var(--theme-workflow-step--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-workflow-step--background--active);\n      }\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(\n          --theme-workflow-step-icon-default--color--disabled\n        ) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  shadow: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   *\n   * @internal\n   */\n  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';\n\n  @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =\n    'circle';\n\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  /**\n   * @internal\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;\n\n  private customIconSlot: boolean;\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? 'circle-dot' : 'circle';\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = 'circle';\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = 'success';\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = 'success';\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = 'warning';\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = 'error';\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = 'circle';\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentWillLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  onStepClick() {\n    if (!this.disabled && this.clickable) {\n      this.selectedChanged.emit(this.hostElement);\n    }\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : null;\n\n    return (\n      <Host\n        class={{ 'host-vertical': this.vertical }}\n        onClick={() => this.onStepClick()}\n      >\n        <div\n          tabIndex={0}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n            clickable: this.clickable && !this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uEAAA,MAAMA,EAAkB,8/GACxB,MAAAC,EAAeD,E,MC0BFE,EAAY,M,wFAMK,M,cAKA,M,YAKwC,O,eAKvC,M,cAKD,M,cAOkC,Y,cAG5D,S,eAE2B,mC,CAU7B,eAAAC,GACE,MAAMC,EAAgBC,KAAKC,SAAW,aAAe,GAErD,GAAID,KAAKE,SAAW,OAAQ,CAC1BF,KAAKG,SAAWH,KAAKC,SAAW,aAAe,SAC/CD,KAAKI,UAAY,oCAAoCL,G,CAGvD,GAAIC,KAAKE,SAAW,SAAWF,KAAKK,SAAU,CAC5CL,KAAKI,UAAY,iCAAiCL,G,EAMtD,gBAAAO,GACE,OAAQN,KAAKE,QACX,IAAK,OACHF,KAAKG,SAAW,SAChBH,KAAKI,UAAY,oCACjB,MACF,IAAK,UACHJ,KAAKG,SAAW,UAChBH,KAAKI,UAAY,gBACjB,MACF,IAAK,OACHJ,KAAKG,SAAW,UAChBH,KAAKI,UAAY,iCACjB,MACF,IAAK,UACHJ,KAAKG,SAAW,UAChBH,KAAKI,UAAY,gBACjB,MACF,IAAK,QACHJ,KAAKG,SAAW,QAChBH,KAAKI,UAAY,cACjB,MAEF,QACEJ,KAAKG,SAAW,SAChB,MAGJ,GAAIH,KAAKK,SAAU,CACjBL,KAAKI,UAAY,6C,EAIrB,iBAAAG,GACEP,KAAKM,mBACLN,KAAKF,kBAELE,KAAKQ,iBAAmBR,KAAKS,YAAYC,cACvC,uB,CAIJ,WAAAC,GACE,IAAKX,KAAKK,UAAYL,KAAKY,UAAW,CACpCZ,KAAKa,gBAAgBC,KAAKd,KAAKS,Y,EAInC,MAAAM,GACE,MAAMC,GAAShB,KAAKQ,eAClBS,EAACC,EAAQ,KACPD,EAAA,WACEE,MAAM,UACNC,KACEpB,KAAKG,WAAa,UAAY,kBAAoB,gBAEpDkB,MAAM,WACNC,KAAK,OAEPL,EAAA,WACEE,MAAOnB,KAAKI,UACZgB,KAAMpB,KAAKG,SACXkB,MAAM,WACNC,KAAK,QAGP,KAEJ,OACEL,EAACM,EAAI,CAAAC,IAAA,2CACHH,MAAO,CAAE,gBAAiBrB,KAAKyB,UAC/BC,QAAS,IAAM1B,KAAKW,eAEpBM,EAAA,OAAAO,IAAA,2CACEG,SAAU,EACVN,MAAO,CACLO,KAAM,KACN3B,SAAUD,KAAKC,SACfwB,SAAUzB,KAAKyB,SACfpB,SAAUL,KAAKK,SACfO,UAAWZ,KAAKY,YAAcZ,KAAKK,WAGrCY,EAAA,OAAAO,IAAA,2CAAKH,MAAM,WACTJ,EAAA,OAAAO,IAAA,2CACEH,MAAO,CACLQ,KAAM,KACN5B,SAAUD,KAAKC,SACf,CAACD,KAAKE,QAAS,KACf,CAACF,KAAK8B,UAAW,QAGrBb,EAAA,OAAAO,IAAA,2CAAKH,MAAM,eACRL,EACDC,EAAA,QAAAO,IAAA,2CAAMJ,KAAK,kBAGfH,EAAA,OAAAO,IAAA,2CAAKH,MAAM,QACTJ,EAAA,QAAAO,IAAA,+C"}

package/dist/siemens-ix/p-b5c4fd55.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as o,H as r}from"./p-f86a894a.js";const t=":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}: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 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-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);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";const i=t;const a=class{constructor(o){e(this,o);this.label=undefined;this.value=undefined;this.unit=undefined;this.state="neutral";this.orientation="horizontal"}getStateIcon(){switch(this.state){case"alarm":return o("ix-icon",{color:"kpi-display-icon--color",name:"alarm",size:"16"});case"warning":return o("ix-icon",{color:"kpi-display-icon--color",name:"warning",size:"16"});default:return""}}getTooltipText(){let e=`${this.label}: ${this.value}`;if(this.unit){e=e.concat(` ${this.unit}`)}return e}render(){return o(r,{key:"7f1d8bcbc35516dcde7fda85571fd79082049bfc",title:this.getTooltipText(),tabindex:"1",class:{stacked:this.orientation==="vertical"}},o("div",{key:"e68bde8404bfc305862eb6e5b05d9d091aceaf0a",class:{"kpi-container":true,alarm:this.state==="alarm",warning:this.state==="warning"}},o("span",{key:"c967f529b0810e87818e6b243df6e8e108247a93",class:"kpi-label"},this.getStateIcon(),o("span",{key:"07e375c681b3f784bb4b83b47018557746957bc2",class:"kpi-label-text"},this.label)),o("span",{key:"afa38edb472781931448bb7be0345861766cf5d4",class:"kpi-value-container"},o("span",{key:"93d25eb40e95165ef9a38b79765bea26f850f84b",class:"kpi-value"},this.value),this.unit?o("span",{class:"kpi-unit"},this.unit):"")))}};a.style=i;export{a as ix_kpi};
+//# sourceMappingURL=p-b5c4fd55.entry.js.map

package/dist/siemens-ix/{p-ca65a043.entry.js.map → p-b5c4fd55.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["kpiCss","IxKpiStyle0","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","key","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,62EACf,MAAAC,EAAeD,E,MCeFE,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzC,YAAAC,GACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAIL,cAAAC,GACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGT,MAAAK,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,2CACHC,MAAOf,KAAKM,iBACZU,SAAS,IACTC,MAAO,CACLC,QAASlB,KAAKmB,cAAgB,aAGhCjB,EAAA,OAAAY,IAAA,2CACEG,MAAO,CACL,gBAAiB,KACjBG,MAAOpB,KAAKC,QAAU,QACtBoB,QAASrB,KAAKC,QAAU,YAG1BC,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aACTjB,KAAKD,eACNG,EAAA,QAAAY,IAAA,2CAAMG,MAAM,kBAAkBjB,KAAKQ,QAErCN,EAAA,QAAAY,IAAA,2CAAMG,MAAM,uBACVf,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aAAajB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMe,MAAM,YAAYjB,KAAKU,MAAe,K"}
+{"version":3,"names":["kpiCss","IxKpiStyle0","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","key","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.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 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,ygFACf,MAAAC,EAAeD,E,MCeFE,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzC,YAAAC,GACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAIL,cAAAC,GACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGT,MAAAK,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,2CACHC,MAAOf,KAAKM,iBACZU,SAAS,IACTC,MAAO,CACLC,QAASlB,KAAKmB,cAAgB,aAGhCjB,EAAA,OAAAY,IAAA,2CACEG,MAAO,CACL,gBAAiB,KACjBG,MAAOpB,KAAKC,QAAU,QACtBoB,QAASrB,KAAKC,QAAU,YAG1BC,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aACTjB,KAAKD,eACNG,EAAA,QAAAY,IAAA,2CAAMG,MAAM,kBAAkBjB,KAAKQ,QAErCN,EAAA,QAAAY,IAAA,2CAAMG,MAAM,uBACVf,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aAAajB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMe,MAAM,YAAYjB,KAAKU,MAAe,K"}

package/dist/siemens-ix/p-b6c0dfb5.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as e,g as t}from"./p-f86a894a.js";import"./p-46a6cd9d.js";import{d as a}from"./p-6e6efb4c.js";import"./p-c4749812.js";const i=":host{display:block}: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{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";const s=i;function n(r){function e(r){if(r!=="_blank"&&r!=="_parent"&&r!=="_self"&&r!=="_top"){return true}if(r==="_blank"){return true}return false}return o("button",{class:{AppEntry:true,Selected:r.selected},onClick:()=>{a(r.host);window.open(r.url,r.target)}},o("div",null,o("img",{class:"AppIcon",src:r.iconSrc})),o("div",{class:"AppName"},o("ix-typography",{format:"h4"},r.name,e(r.target)&&o("ix-icon",{size:"12",name:"open-external",color:"color-soft-text"})),o("ix-typography",{format:"label-sm",color:"soft"},r.description)))}const d=class{constructor(o){r(this,o);this.config=undefined}componentWillLoad(){if(!this.config){throw Error("ApplicationConfig not provided")}}render(){var r,t,a,i;return o(e,{key:"d9630d54ee09410a4642c32462a60627394aa48e"},o("ix-modal-header",{key:"8b6d0de6fbcddc233d0a14890983dc222bf5d2c6",icon:"apps"},((r=this.config)===null||r===void 0?void 0:r.i18nAppSwitch)||"Switch to application"),o("ix-modal-content",{key:"7f80e73a60d019138ba34d83d7b64eac6f69ed2d",class:"content"},o("div",{key:"10dfa16ceb859e19c10952c7d72d6e8cba2c89cf",class:"content-apps"},(!this.config||((t=this.config)===null||t===void 0?void 0:t.apps.length)===0)&&o("div",{key:"250971132fe98036989dcf058f313c146d74cf3d",class:"loading"},o("ix-spinner",{key:"157940c79952e2737e1a69700bdf03703f6147b4",size:"medium",variant:"primary"}),o("span",{key:"61453fa7330672b48d86d4c544c4cfbb57327933"},((a=this.config)===null||a===void 0?void 0:a.i18nLoadingApps)||"Loading available applications...")),(i=this.config)===null||i===void 0?void 0:i.apps.map((r=>{var e;return o(n,{host:this.hostElement,name:r.name,description:r.description,iconSrc:r.iconSrc,target:r.target,url:r.url,selected:r.id===((e=this.config)===null||e===void 0?void 0:e.currentAppId)})})))))}get hostElement(){return t(this)}};d.style=s;export{d as ix_application_switch_modal};
+//# sourceMappingURL=p-b6c0dfb5.entry.js.map

package/dist/siemens-ix/{p-04a362da.entry.js.map → p-b6c0dfb5.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["applicationSwitchModalCss","IxApplicationSwitchModalStyle0","ApplicationItem","props","isExternal","target","h","class","AppEntry","Selected","selected","onClick","dismissModal","host","window","open","url","src","iconSrc","format","name","size","color","description","ApplicationSwitchModal","componentWillLoad","this","config","Error","render","Host","key","icon","_a","i18nAppSwitch","_b","apps","length","variant","_c","i18nLoadingApps","_d","map","appEntry","hostElement","id","currentAppId"],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-modal.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@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n\n:host {\n  @include ix-component;\n  display: block;\n\n  .content {\n    padding: 2rem;\n    padding-right: 0;\n  }\n\n  .content-apps {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    max-height: 50vh;\n    margin-right: 0.25rem;\n    gap: 1.5rem;\n  }\n\n  .loading {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ix-spinner {\n      margin-right: 1rem;\n    }\n  }\n}\n\n:host {\n  .AppEntry {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.5rem;\n    flex: 1 1 calc(45%);\n    cursor: pointer;\n    border: 0.0625rem solid transparent;\n  }\n\n  .AppEntry.Selected {\n    background-color: var(--theme-color-ghost--selected);\n    border: var(--theme-dynamic-bdr-1);\n  }\n\n  .AppEntry {\n    @include ghost-hover-pressed;\n  }\n\n  .AppEntry:focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr);\n  }\n\n  .AppName {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .AppName ix-icon {\n    margin-left: 1rem;\n  }\n\n  .AppIcon {\n    width: 3rem;\n    height: 3rem;\n    border-radius: 0.25rem;\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, Element, h, Host, Prop } from '@stencil/core';\nimport {\n  AppSwitchConfiguration,\n  AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n  host: HTMLIxApplicationSwitchModalElement;\n  name: string;\n  description: string;\n  iconSrc: string;\n  url: string;\n  target: AppSwitchConfigurationTarget;\n  selected: boolean;\n}) {\n  function isExternal(target: AppSwitchConfigurationTarget) {\n    if (\n      target !== '_blank' &&\n      target !== '_parent' &&\n      target !== '_self' &&\n      target !== '_top'\n    ) {\n      // Check if its one of the target keywords\n      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n      return true;\n    }\n\n    if (target === '_blank') {\n      return true;\n    }\n\n    return false;\n  }\n\n  return (\n    <button\n      class={{\n        AppEntry: true,\n        Selected: props.selected,\n      }}\n      onClick={() => {\n        dismissModal(props.host);\n        window.open(props.url, props.target);\n      }}\n    >\n      <div>\n        <img class=\"AppIcon\" src={props.iconSrc}></img>\n      </div>\n      <div class=\"AppName\">\n        <ix-typography format=\"h4\">\n          {props.name}\n          {isExternal(props.target) && (\n            <ix-icon\n              size=\"12\"\n              name=\"open-external\"\n              color=\"color-soft-text\"\n            ></ix-icon>\n          )}\n        </ix-typography>\n        <ix-typography format=\"label-sm\" color=\"soft\">\n          {props.description}\n        </ix-typography>\n      </div>\n    </button>\n  );\n}\n\n/** @internal */\n@Component({\n  tag: 'ix-application-switch-modal',\n  styleUrl: 'application-switch-modal.scss',\n  shadow: true,\n})\nexport class ApplicationSwitchModal {\n  @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n  /** @internal */\n  @Prop() config: AppSwitchConfiguration;\n\n  componentWillLoad() {\n    if (!this.config) {\n      throw Error('ApplicationConfig not provided');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-modal-header icon=\"apps\">\n          {this.config?.i18nAppSwitch || 'Switch to application'}\n        </ix-modal-header>\n        <ix-modal-content class=\"content\">\n          <div class=\"content-apps\">\n            {(!this.config || this.config?.apps.length === 0) && (\n              <div class=\"loading\">\n                <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n                <span>\n                  {this.config?.i18nLoadingApps ||\n                    'Loading available applications...'}\n                </span>\n              </div>\n            )}\n            {this.config?.apps.map((appEntry) => (\n              <ApplicationItem\n                host={this.hostElement}\n                name={appEntry.name}\n                description={appEntry.description}\n                iconSrc={appEntry.iconSrc}\n                target={appEntry.target}\n                url={appEntry.url}\n                selected={appEntry.id === this.config?.currentAppId}\n              ></ApplicationItem>\n            ))}\n          </div>\n        </ix-modal-content>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6IAAA,MAAMA,EAA4B,ktDAClC,MAAAC,EAAeD,ECef,SAASE,EAAgBC,GASvB,SAASC,EAAWC,GAClB,GACEA,IAAW,UACXA,IAAW,WACXA,IAAW,SACXA,IAAW,OACX,CAGA,OAAO,I,CAGT,GAAIA,IAAW,SAAU,CACvB,OAAO,I,CAGT,OAAO,K,CAGT,OACEC,EAAA,UACEC,MAAO,CACLC,SAAU,KACVC,SAAUN,EAAMO,UAElBC,QAAS,KACPC,EAAaT,EAAMU,MACnBC,OAAOC,KAAKZ,EAAMa,IAAKb,EAAME,OAAO,GAGtCC,EAAA,WACEA,EAAA,OAAKC,MAAM,UAAUU,IAAKd,EAAMe,WAElCZ,EAAA,OAAKC,MAAM,WACTD,EAAA,iBAAea,OAAO,MACnBhB,EAAMiB,KACNhB,EAAWD,EAAME,SAChBC,EAAA,WACEe,KAAK,KACLD,KAAK,gBACLE,MAAM,qBAIZhB,EAAA,iBAAea,OAAO,WAAWG,MAAM,QACpCnB,EAAMoB,cAKjB,C,MAQaC,EAAsB,M,+CAMjC,iBAAAC,GACE,IAAKC,KAAKC,OAAQ,CAChB,MAAMC,MAAM,iC,EAIhB,MAAAC,G,YACE,OACEvB,EAACwB,EAAI,CAAAC,IAAA,4CACHzB,EAAA,mBAAAyB,IAAA,2CAAiBC,KAAK,UACnBC,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEC,gBAAiB,yBAEjC5B,EAAA,oBAAAyB,IAAA,2CAAkBxB,MAAM,WACtBD,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,kBACNmB,KAAKC,UAAUQ,EAAAT,KAAKC,UAAM,MAAAQ,SAAA,SAAAA,EAAEC,KAAKC,UAAW,IAC7C/B,EAAA,OAAKC,MAAM,WACTD,EAAA,cAAYe,KAAK,SAASiB,QAAQ,YAClChC,EAAA,cACGiC,EAAAb,KAAKC,UAAM,MAAAY,SAAA,SAAAA,EAAEC,kBACZ,uCAIPC,EAAAf,KAAKC,UAAM,MAAAc,SAAA,S,EAAEL,KAAKM,KAAKC,I,MAAa,OACnCrC,EAACJ,EAAe,CACdW,KAAMa,KAAKkB,YACXxB,KAAMuB,EAASvB,KACfG,YAAaoB,EAASpB,YACtBL,QAASyB,EAASzB,QAClBb,OAAQsC,EAAStC,OACjBW,IAAK2B,EAAS3B,IACdN,SAAUiC,EAASE,OAAOZ,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEa,eACtB,M"}
+{"version":3,"names":["applicationSwitchModalCss","IxApplicationSwitchModalStyle0","ApplicationItem","props","isExternal","target","h","class","AppEntry","Selected","selected","onClick","dismissModal","host","window","open","url","src","iconSrc","format","name","size","color","description","ApplicationSwitchModal","componentWillLoad","this","config","Error","render","Host","key","icon","_a","i18nAppSwitch","_b","apps","length","variant","_c","i18nLoadingApps","_d","map","appEntry","hostElement","id","currentAppId"],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-modal.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@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n\n:host {\n  @include ix-component;\n  display: block;\n\n  .content {\n    padding: 2rem;\n    padding-right: 0;\n  }\n\n  .content-apps {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    max-height: 50vh;\n    margin-right: 0.25rem;\n    gap: 1.5rem;\n  }\n\n  .loading {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ix-spinner {\n      margin-right: 1rem;\n    }\n  }\n}\n\n:host {\n  .AppEntry {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.5rem;\n    flex: 1 1 calc(45%);\n    cursor: pointer;\n    border: 0.0625rem solid transparent;\n  }\n\n  .AppEntry.Selected {\n    background-color: var(--theme-color-ghost--selected);\n    border: var(--theme-dynamic-bdr-1);\n  }\n\n  .AppEntry {\n    @include ghost-hover-pressed;\n  }\n\n  .AppEntry:focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr);\n  }\n\n  .AppName {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .AppName ix-icon {\n    margin-left: 1rem;\n  }\n\n  .AppIcon {\n    width: 3rem;\n    height: 3rem;\n    border-radius: 0.25rem;\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, Element, h, Host, Prop } from '@stencil/core';\nimport {\n  AppSwitchConfiguration,\n  AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n  host: HTMLIxApplicationSwitchModalElement;\n  name: string;\n  description: string;\n  iconSrc: string;\n  url: string;\n  target: AppSwitchConfigurationTarget;\n  selected: boolean;\n}) {\n  function isExternal(target: AppSwitchConfigurationTarget) {\n    if (\n      target !== '_blank' &&\n      target !== '_parent' &&\n      target !== '_self' &&\n      target !== '_top'\n    ) {\n      // Check if its one of the target keywords\n      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n      return true;\n    }\n\n    if (target === '_blank') {\n      return true;\n    }\n\n    return false;\n  }\n\n  return (\n    <button\n      class={{\n        AppEntry: true,\n        Selected: props.selected,\n      }}\n      onClick={() => {\n        dismissModal(props.host);\n        window.open(props.url, props.target);\n      }}\n    >\n      <div>\n        <img class=\"AppIcon\" src={props.iconSrc}></img>\n      </div>\n      <div class=\"AppName\">\n        <ix-typography format=\"h4\">\n          {props.name}\n          {isExternal(props.target) && (\n            <ix-icon\n              size=\"12\"\n              name=\"open-external\"\n              color=\"color-soft-text\"\n            ></ix-icon>\n          )}\n        </ix-typography>\n        <ix-typography format=\"label-sm\" color=\"soft\">\n          {props.description}\n        </ix-typography>\n      </div>\n    </button>\n  );\n}\n\n/** @internal */\n@Component({\n  tag: 'ix-application-switch-modal',\n  styleUrl: 'application-switch-modal.scss',\n  shadow: true,\n})\nexport class ApplicationSwitchModal {\n  @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n  /** @internal */\n  @Prop() config: AppSwitchConfiguration;\n\n  componentWillLoad() {\n    if (!this.config) {\n      throw Error('ApplicationConfig not provided');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-modal-header icon=\"apps\">\n          {this.config?.i18nAppSwitch || 'Switch to application'}\n        </ix-modal-header>\n        <ix-modal-content class=\"content\">\n          <div class=\"content-apps\">\n            {(!this.config || this.config?.apps.length === 0) && (\n              <div class=\"loading\">\n                <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n                <span>\n                  {this.config?.i18nLoadingApps ||\n                    'Loading available applications...'}\n                </span>\n              </div>\n            )}\n            {this.config?.apps.map((appEntry) => (\n              <ApplicationItem\n                host={this.hostElement}\n                name={appEntry.name}\n                description={appEntry.description}\n                iconSrc={appEntry.iconSrc}\n                target={appEntry.target}\n                url={appEntry.url}\n                selected={appEntry.id === this.config?.currentAppId}\n              ></ApplicationItem>\n            ))}\n          </div>\n        </ix-modal-content>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAA4B,82DAClC,MAAAC,EAAeD,ECef,SAASE,EAAgBC,GASvB,SAASC,EAAWC,GAClB,GACEA,IAAW,UACXA,IAAW,WACXA,IAAW,SACXA,IAAW,OACX,CAGA,OAAO,I,CAGT,GAAIA,IAAW,SAAU,CACvB,OAAO,I,CAGT,OAAO,K,CAGT,OACEC,EAAA,UACEC,MAAO,CACLC,SAAU,KACVC,SAAUN,EAAMO,UAElBC,QAAS,KACPC,EAAaT,EAAMU,MACnBC,OAAOC,KAAKZ,EAAMa,IAAKb,EAAME,OAAO,GAGtCC,EAAA,WACEA,EAAA,OAAKC,MAAM,UAAUU,IAAKd,EAAMe,WAElCZ,EAAA,OAAKC,MAAM,WACTD,EAAA,iBAAea,OAAO,MACnBhB,EAAMiB,KACNhB,EAAWD,EAAME,SAChBC,EAAA,WACEe,KAAK,KACLD,KAAK,gBACLE,MAAM,qBAIZhB,EAAA,iBAAea,OAAO,WAAWG,MAAM,QACpCnB,EAAMoB,cAKjB,C,MAQaC,EAAsB,M,+CAMjC,iBAAAC,GACE,IAAKC,KAAKC,OAAQ,CAChB,MAAMC,MAAM,iC,EAIhB,MAAAC,G,YACE,OACEvB,EAACwB,EAAI,CAAAC,IAAA,4CACHzB,EAAA,mBAAAyB,IAAA,2CAAiBC,KAAK,UACnBC,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEC,gBAAiB,yBAEjC5B,EAAA,oBAAAyB,IAAA,2CAAkBxB,MAAM,WACtBD,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,kBACNmB,KAAKC,UAAUQ,EAAAT,KAAKC,UAAM,MAAAQ,SAAA,SAAAA,EAAEC,KAAKC,UAAW,IAC7C/B,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,WACTD,EAAA,cAAAyB,IAAA,2CAAYV,KAAK,SAASiB,QAAQ,YAClChC,EAAA,QAAAyB,IAAA,8CACGQ,EAAAb,KAAKC,UAAM,MAAAY,SAAA,SAAAA,EAAEC,kBACZ,uCAIPC,EAAAf,KAAKC,UAAM,MAAAc,SAAA,S,EAAEL,KAAKM,KAAKC,I,MAAa,OACnCrC,EAACJ,EAAe,CACdW,KAAMa,KAAKkB,YACXxB,KAAMuB,EAASvB,KACfG,YAAaoB,EAASpB,YACtBL,QAASyB,EAASzB,QAClBb,OAAQsC,EAAStC,OACjBW,IAAK2B,EAAS3B,IACdN,SAAUiC,EAASE,OAAOZ,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEa,eACtB,M"}

package/dist/siemens-ix/p-b789e0e7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,f as e,h as s,H as o,g as i}from"./p-f86a894a.js";import{a as n}from"./p-702f9349.js";import{m as l}from"./p-68a274e7.js";import"./p-c4749812.js";const a=":host{display:flex;position:absolute;width:100%;height:100%}: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 .side-panes-wrapper{height:100%;width:100%}:host .row{height:100%;width:100%;overflow:hidden;display:flex;flex-direction:row;justify-content:space-between;position:relative}:host .col{height:100%;width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;position:relative}:host .content{width:100%;height:100%;overflow:auto}:host .absolute-top{width:100%;position:absolute;top:0}:host .absolute-bottom{width:100%;position:absolute;bottom:0}:host .absolute-left{height:100%;position:absolute;left:0}:host .absolute-right{height:100%;position:absolute;right:0}:host .padding-top{padding-top:2.5rem}:host .padding-bottom{padding-bottom:2.5rem}:host .padding-left{padding-left:2.5rem}:host .padding-right{padding-right:2.5rem}";const h=a;const r=class{constructor(e){t(this,e);this.panes=[];this.layout="full-vertical";this.variant="inline";this.borderless=false;this.isMobile=false;this.paneElements=0}get currentPanes(){return this.hostElement.querySelectorAll("ix-pane")}componentWillLoad(){this.paneElements=this.currentPanes.length;this.observer=new MutationObserver((t=>{var e,s;if(((e=t[0].addedNodes.item(0))===null||e===void 0?void 0:e.nodeName)==="IX-PANE"){this.paneElements+=1}else if(((s=t[0].removedNodes.item(0))===null||s===void 0?void 0:s.nodeName)==="IX-PANE"){this.paneElements-=1}}));this.observer.observe(this.hostElement,{childList:true});this.isMobile=l("sm");n.onChange.on((()=>{this.isMobile=l("sm")}))}componentDidLoad(){this.setPanes(this.currentPanes)}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}setPaneVariant(t){if(!t.ignoreLayoutSettings){t.variant=this.variant}}setPaneBorder(t){if(!t.ignoreLayoutSettings){if(this.borderless){t.borderless=true}else{const e=!!this.panes.find((t=>t.slot==="left"&&!t.hideOnCollapse));if(t.variant==="floating"&&this.layout==="full-vertical"&&e&&(t.composition==="top"||t.composition==="bottom")){t.borderless=true}else{t.borderless=false}}}}setPaneZIndex(t){const e=t.slot==="top";const s=t.slot==="bottom";const o=t.slot==="left";const i=t.slot==="right";let n=1;if(this.isMobile){if(s||e){n=3}}else{if(this.layout==="full-vertical"){if(o||i){n=3}}else{if(s||e){n=3}}}t.style.zIndex=n.toString()}setPanes(t){this.panes=[];t.forEach((t=>{this.panes.push({slot:t.slot,hideOnCollapse:t.hideOnCollapse,floating:t.variant==="floating"})}))}closeFloatingPanes(){this.currentPanes.forEach((t=>{if(t.expanded&&t.variant==="floating"){t.expanded=false}}))}configurePanes(){let t=0;let s=0;let o=0;let i=0;this.currentPanes.forEach((e=>{const n=e.slot==="top";const l=e.slot==="bottom";const a=e.slot==="left";const h=e.slot==="right";if(a){if(o){e.slot=undefined;return}o++}else if(h){if(i){e.slot=undefined;return}i++}else if(n){if(t){e.slot=undefined;return}t++}else if(l){if(s){e.slot=undefined;return}s++}else{e.slot=undefined;return}this.setPaneVariant(e);this.setPaneBorder(e);this.setPaneZIndex(e)}));this.setPanes(this.currentPanes);e(this.hostElement)}onSlotChanged(){this.configurePanes()}onCollapsibleChanged(t){const{slot:s,hideOnCollapse:o}=t.detail;this.panes.forEach((t=>{if(t.slot===s){t.hideOnCollapse=o}}));e(this.hostElement)}onVariantChanged(t){const{slot:s,variant:o}=t.detail;this.panes.forEach((t=>{if(t.slot===s){t.floating=o==="floating"}}));e(this.hostElement)}onPaneElementsChange(){this.configurePanes()}onVariableChange(){this.currentPanes.forEach((t=>{this.setPaneVariant(t);this.setPaneBorder(t)}));this.setPanes(this.currentPanes);e(this.hostElement)}onBorderChange(){this.currentPanes.forEach((t=>{this.setPaneBorder(t)}))}onLayoutChange(){this.currentPanes.forEach((t=>{this.setPaneBorder(t);this.setPaneZIndex(t)}))}onMobileChange(){this.currentPanes.forEach((t=>{this.setPaneZIndex(t)}))}hasPadding(t){const e=this.panes.find((e=>e.slot===t));return e?!e.hideOnCollapse&&e.floating:false}hasPaddingMobile(t){const e=this.panes.find((e=>e.slot===t));return e&&!e.hideOnCollapse}slotExists(t){const e=this.panes.find((e=>e.slot===t));return!!e}isFloating(t){const e=this.panes.find((e=>e.slot===t));return e?e.floating:false}render(){return s(o,{key:"52ada343d80a6508c1b85de923327cb9c42c9429"},!this.isMobile?this.layout=="full-vertical"?s("div",{class:"side-panes-wrapper"},s("div",{class:{row:true,"padding-left":this.hasPadding("left"),"padding-right":this.hasPadding("right")}},s("div",{key:"left",class:{"absolute-left":this.isFloating("left")}},s("slot",{name:"left"})),s("div",{class:{col:true,"padding-top":this.hasPadding("top"),"padding-bottom":this.hasPadding("bottom")}},s("div",{key:"top",class:{"absolute-top":this.isFloating("top")}},s("slot",{name:"top"})),s("div",{key:"content",class:"content",onClick:()=>this.closeFloatingPanes()},s("slot",{name:"content"})),s("div",{key:"bottom",class:{"absolute-bottom":this.isFloating("bottom")}},s("slot",{name:"bottom"}))),s("div",{key:"right",class:{"absolute-right":this.isFloating("right")}},s("slot",{name:"right"})))):s("div",{class:"side-panes-wrapper"},s("div",{class:{col:true,"padding-top":this.hasPadding("top"),"padding-bottom":this.hasPadding("bottom")}},s("div",{key:"top",class:{"absolute-top":this.isFloating("top")}},s("slot",{name:"top"})),s("div",{class:{row:true,"padding-left":this.hasPadding("left"),"padding-right":this.hasPadding("right")}},s("div",{key:"left",class:{"absolute-left":this.isFloating("left")}},s("slot",{name:"left"})),s("div",{key:"content",class:"content",onClick:()=>this.closeFloatingPanes()},s("slot",{name:"content"})),s("div",{key:"right",class:{"absolute-right":this.isFloating("right")}},s("slot",{name:"right"}))),s("div",{key:"bottom",class:{"absolute-bottom":this.isFloating("bottom")}},s("slot",{name:"bottom"})))):s("div",{class:"col"},s("div",{key:"top",style:{minHeight:this.hasPaddingMobile("top")?"48px":"0",display:this.slotExists("top")?"block":"none"}},s("slot",{name:"top"})),s("div",{key:"left",style:{minHeight:this.hasPaddingMobile("left")?"48px":"0",display:this.slotExists("left")?"block":"none"}},s("slot",{name:"left"})),s("div",{key:"content",class:"content",onClick:()=>this.closeFloatingPanes()},s("slot",{name:"content"})),s("div",{key:"right",style:{minHeight:this.hasPaddingMobile("right")?"48px":"0",display:this.slotExists("right")?"block":"none"}},s("slot",{name:"right"})),s("div",{key:"bottom",style:{minHeight:this.hasPaddingMobile("bottom")?"48px":"0",display:this.slotExists("bottom")?"block":"none"}},s("slot",{name:"bottom"}))))}get hostElement(){return i(this)}static get watchers(){return{paneElements:["onPaneElementsChange"],variant:["onVariableChange"],borderless:["onBorderChange"],layout:["onLayoutChange"],isMobile:["onMobileChange"]}}};r.style=h;export{r as ix_pane_layout};
+//# sourceMappingURL=p-b789e0e7.entry.js.map

package/dist/siemens-ix/{p-6eb4eefc.entry.js.map → p-b789e0e7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["paneLayoutCss","IxPaneLayoutStyle0","Panes","this","panes","currentPanes","hostElement","querySelectorAll","componentWillLoad","paneElements","length","observer","MutationObserver","mutations","_a","addedNodes","item","nodeName","_b","removedNodes","observe","childList","isMobile","matchBreakpoint","applicationLayoutService","onChange","on","componentDidLoad","setPanes","disconnectedCallback","disconnect","setPaneVariant","pane","ignoreLayoutSettings","variant","setPaneBorder","borderless","hasVisibleLeftPane","find","slot","hideOnCollapse","layout","composition","setPaneZIndex","isTop","isBottom","isLeft","isRight","zIndex","style","toString","forEach","push","floating","closeFloatingPanes","expanded","configurePanes","topCount","bottomCount","leftCount","rightCount","undefined","forceUpdate","onSlotChanged","onCollapsibleChanged","event","detail","currentSlot","onVariantChanged","onPaneElementsChange","onVariableChange","onBorderChange","onLayoutChange","onMobileChange","hasPadding","hasPaddingMobile","slotExists","isFloating","render","h","Host","key","class","row","name","col","onClick","minHeight","display"],"sources":["src/components/pane-layout/pane-layout.scss?tag=ix-pane-layout&encapsulation=shadow","src/components/pane-layout/pane-layout.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-padding($composition) {\n  @if $composition {\n    padding-#{$composition}: 2.5rem;\n  }\n}\n\n@mixin set-absolute($composition) {\n  @if $composition {\n    position: absolute;\n    #{$composition}: 0;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .side-panes-wrapper {\n    height: 100%;\n    width: 100%;\n  }\n\n  .row {\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  .col {\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  .content {\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n  }\n\n  .absolute-top {\n    width: 100%;\n    @include set-absolute(top);\n  }\n\n  .absolute-bottom {\n    width: 100%;\n    @include set-absolute(bottom);\n  }\n\n  .absolute-left {\n    height: 100%;\n    @include set-absolute(left);\n  }\n\n  .absolute-right {\n    height: 100%;\n    @include set-absolute(right);\n  }\n\n  .padding-top {\n    @include set-padding(top);\n  }\n\n  .padding-bottom {\n    @include set-padding(bottom);\n  }\n\n  .padding-left {\n    @include set-padding(left);\n  }\n\n  .padding-right {\n    @include set-padding(right);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Composition } from '../pane/pane';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-pane-layout',\n  styleUrl: 'pane-layout.scss',\n  shadow: true,\n})\nexport class Panes {\n  @Element() hostElement: HTMLIxPaneLayoutElement;\n\n  /**\n   * Choose the layout of the panes.\n   * When set to 'full-vertical' the vertical panes (left, right) will get the full height.\n   * When set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.\n   */\n  @Prop() layout: 'full-vertical' | 'full-horizontal' = 'full-vertical';\n\n  /**\n   * Set the default variant for all panes in the layout\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Set the default border state for all panes in the layout\n   */\n  @Prop() borderless: boolean = false;\n\n  @State() private isMobile = false;\n  @State() private paneElements = 0;\n\n  private panes: Array<{\n    slot: string;\n    hideOnCollapse: boolean;\n    floating: boolean;\n  }> = [];\n\n  private observer: MutationObserver;\n\n  get currentPanes() {\n    return this.hostElement.querySelectorAll('ix-pane');\n  }\n\n  componentWillLoad() {\n    this.paneElements = this.currentPanes.length;\n\n    this.observer = new MutationObserver((mutations) => {\n      if (mutations[0].addedNodes.item(0)?.nodeName === 'IX-PANE') {\n        this.paneElements += 1;\n      } else if (mutations[0].removedNodes.item(0)?.nodeName === 'IX-PANE') {\n        this.paneElements -= 1;\n      }\n    });\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n  }\n\n  componentDidLoad() {\n    this.setPanes(this.currentPanes);\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  private setPaneVariant(pane: HTMLIxPaneElement) {\n    if (!pane.ignoreLayoutSettings) {\n      pane.variant = this.variant;\n    }\n  }\n\n  private setPaneBorder(pane: HTMLIxPaneElement) {\n    if (!pane.ignoreLayoutSettings) {\n      if (this.borderless) {\n        pane.borderless = true;\n      } else {\n        const hasVisibleLeftPane = !!this.panes.find(\n          (pane) => pane.slot === 'left' && !pane.hideOnCollapse\n        );\n        if (\n          pane.variant === 'floating' &&\n          this.layout === 'full-vertical' &&\n          hasVisibleLeftPane &&\n          (pane.composition === 'top' || pane.composition === 'bottom')\n        ) {\n          pane.borderless = true;\n        } else {\n          pane.borderless = false;\n        }\n      }\n    }\n  }\n\n  private setPaneZIndex(pane: HTMLIxPaneElement) {\n    const isTop = pane.slot === 'top';\n    const isBottom = pane.slot === 'bottom';\n    const isLeft = pane.slot === 'left';\n    const isRight = pane.slot === 'right';\n\n    let zIndex = 1;\n    if (this.isMobile) {\n      if (isBottom || isTop) {\n        zIndex = 3;\n      }\n    } else {\n      if (this.layout === 'full-vertical') {\n        if (isLeft || isRight) {\n          zIndex = 3;\n        }\n      } else {\n        if (isBottom || isTop) {\n          zIndex = 3;\n        }\n      }\n    }\n    pane.style.zIndex = zIndex.toString();\n  }\n\n  private setPanes(panes: NodeListOf<HTMLIxPaneElement>) {\n    this.panes = [];\n    panes.forEach((pane) => {\n      this.panes.push({\n        slot: pane.slot,\n        hideOnCollapse: pane.hideOnCollapse,\n        floating: pane.variant === 'floating',\n      });\n    });\n  }\n\n  private closeFloatingPanes() {\n    this.currentPanes.forEach((pane) => {\n      if (pane.expanded && pane.variant === 'floating') {\n        pane.expanded = false;\n      }\n    });\n  }\n\n  private configurePanes() {\n    let topCount = 0;\n    let bottomCount = 0;\n    let leftCount = 0;\n    let rightCount = 0;\n\n    this.currentPanes.forEach((pane) => {\n      const isTop = pane.slot === 'top';\n      const isBottom = pane.slot === 'bottom';\n      const isLeft = pane.slot === 'left';\n      const isRight = pane.slot === 'right';\n\n      if (isLeft) {\n        if (leftCount) {\n          pane.slot = undefined;\n          return;\n        }\n        leftCount++;\n      } else if (isRight) {\n        if (rightCount) {\n          pane.slot = undefined;\n          return;\n        }\n        rightCount++;\n      } else if (isTop) {\n        if (topCount) {\n          pane.slot = undefined;\n          return;\n        }\n        topCount++;\n      } else if (isBottom) {\n        if (bottomCount) {\n          pane.slot = undefined;\n          return;\n        }\n        bottomCount++;\n      } else {\n        pane.slot = undefined;\n        return;\n      }\n\n      this.setPaneVariant(pane);\n      this.setPaneBorder(pane);\n      this.setPaneZIndex(pane);\n    });\n\n    this.setPanes(this.currentPanes);\n    forceUpdate(this.hostElement);\n  }\n\n  @Listen('slotChanged')\n  onSlotChanged() {\n    this.configurePanes();\n  }\n\n  @Listen('hideOnCollapseChanged')\n  onCollapsibleChanged(event: CustomEvent) {\n    const { slot, hideOnCollapse } = event.detail;\n\n    this.panes.forEach((currentSlot) => {\n      if (currentSlot.slot === slot) {\n        currentSlot.hideOnCollapse = hideOnCollapse;\n      }\n    });\n\n    forceUpdate(this.hostElement);\n  }\n\n  @Listen('variantChanged')\n  onVariantChanged(event: CustomEvent) {\n    const { slot, variant } = event.detail;\n\n    this.panes.forEach((currentSlot) => {\n      if (currentSlot.slot === slot) {\n        currentSlot.floating = variant === 'floating';\n      }\n    });\n\n    forceUpdate(this.hostElement);\n  }\n\n  @Watch('paneElements')\n  onPaneElementsChange() {\n    this.configurePanes();\n  }\n\n  @Watch('variant')\n  onVariableChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneVariant(pane);\n      this.setPaneBorder(pane);\n    });\n\n    this.setPanes(this.currentPanes);\n    forceUpdate(this.hostElement);\n  }\n\n  @Watch('borderless')\n  onBorderChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneBorder(pane);\n    });\n  }\n\n  @Watch('layout')\n  onLayoutChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneBorder(pane);\n      this.setPaneZIndex(pane);\n    });\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneZIndex(pane);\n    });\n  }\n\n  private hasPadding(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return pane ? !pane.hideOnCollapse && pane.floating : false;\n  }\n\n  private hasPaddingMobile(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return pane && !pane.hideOnCollapse;\n  }\n\n  private slotExists(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return !!pane;\n  }\n\n  private isFloating(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return pane ? pane.floating : false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.isMobile ? (\n          this.layout == 'full-vertical' ? (\n            <div class=\"side-panes-wrapper\">\n              <div\n                class={{\n                  row: true,\n                  'padding-left': this.hasPadding('left'),\n                  'padding-right': this.hasPadding('right'),\n                }}\n              >\n                <div\n                  key=\"left\"\n                  class={{ 'absolute-left': this.isFloating('left') }}\n                >\n                  <slot name=\"left\"></slot>\n                </div>\n                <div\n                  class={{\n                    col: true,\n                    'padding-top': this.hasPadding('top'),\n                    'padding-bottom': this.hasPadding('bottom'),\n                  }}\n                >\n                  <div\n                    key=\"top\"\n                    class={{ 'absolute-top': this.isFloating('top') }}\n                  >\n                    <slot name=\"top\"></slot>\n                  </div>\n                  <div\n                    key=\"content\"\n                    class=\"content\"\n                    onClick={() => this.closeFloatingPanes()}\n                  >\n                    <slot name=\"content\"></slot>\n                  </div>\n                  <div\n                    key=\"bottom\"\n                    class={{ 'absolute-bottom': this.isFloating('bottom') }}\n                  >\n                    <slot name=\"bottom\"></slot>\n                  </div>\n                </div>\n                <div\n                  key=\"right\"\n                  class={{ 'absolute-right': this.isFloating('right') }}\n                >\n                  <slot name=\"right\"></slot>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"side-panes-wrapper\">\n              <div\n                class={{\n                  col: true,\n                  'padding-top': this.hasPadding('top'),\n                  'padding-bottom': this.hasPadding('bottom'),\n                }}\n              >\n                <div\n                  key=\"top\"\n                  class={{ 'absolute-top': this.isFloating('top') }}\n                >\n                  <slot name=\"top\"></slot>\n                </div>\n                <div\n                  class={{\n                    row: true,\n                    'padding-left': this.hasPadding('left'),\n                    'padding-right': this.hasPadding('right'),\n                  }}\n                >\n                  <div\n                    key=\"left\"\n                    class={{ 'absolute-left': this.isFloating('left') }}\n                  >\n                    <slot name=\"left\"></slot>\n                  </div>\n                  <div\n                    key=\"content\"\n                    class=\"content\"\n                    onClick={() => this.closeFloatingPanes()}\n                  >\n                    <slot name=\"content\"></slot>\n                  </div>\n                  <div\n                    key=\"right\"\n                    class={{ 'absolute-right': this.isFloating('right') }}\n                  >\n                    <slot name=\"right\"></slot>\n                  </div>\n                </div>\n                <div\n                  key=\"bottom\"\n                  class={{ 'absolute-bottom': this.isFloating('bottom') }}\n                >\n                  <slot name=\"bottom\"></slot>\n                </div>\n              </div>\n            </div>\n          )\n        ) : (\n          <div class=\"col\">\n            <div\n              key=\"top\"\n              style={{\n                minHeight: this.hasPaddingMobile('top') ? '48px' : '0',\n                display: this.slotExists('top') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"top\"></slot>\n            </div>\n            <div\n              key=\"left\"\n              style={{\n                minHeight: this.hasPaddingMobile('left') ? '48px' : '0',\n                display: this.slotExists('left') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"left\"></slot>\n            </div>\n            <div\n              key=\"content\"\n              class=\"content\"\n              onClick={() => this.closeFloatingPanes()}\n            >\n              <slot name=\"content\"></slot>\n            </div>\n            <div\n              key=\"right\"\n              style={{\n                minHeight: this.hasPaddingMobile('right') ? '48px' : '0',\n                display: this.slotExists('right') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"right\"></slot>\n            </div>\n            <div\n              key=\"bottom\"\n              style={{\n                minHeight: this.hasPaddingMobile('bottom') ? '48px' : '0',\n                display: this.slotExists('bottom') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"bottom\"></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["paneLayoutCss","IxPaneLayoutStyle0","Panes","this","panes","currentPanes","hostElement","querySelectorAll","componentWillLoad","paneElements","length","observer","MutationObserver","mutations","_a","addedNodes","item","nodeName","_b","removedNodes","observe","childList","isMobile","matchBreakpoint","applicationLayoutService","onChange","on","componentDidLoad","setPanes","disconnectedCallback","disconnect","setPaneVariant","pane","ignoreLayoutSettings","variant","setPaneBorder","borderless","hasVisibleLeftPane","find","slot","hideOnCollapse","layout","composition","setPaneZIndex","isTop","isBottom","isLeft","isRight","zIndex","style","toString","forEach","push","floating","closeFloatingPanes","expanded","configurePanes","topCount","bottomCount","leftCount","rightCount","undefined","forceUpdate","onSlotChanged","onCollapsibleChanged","event","detail","currentSlot","onVariantChanged","onPaneElementsChange","onVariableChange","onBorderChange","onLayoutChange","onMobileChange","hasPadding","hasPaddingMobile","slotExists","isFloating","render","h","Host","key","class","row","name","col","onClick","minHeight","display"],"sources":["src/components/pane-layout/pane-layout.scss?tag=ix-pane-layout&encapsulation=shadow","src/components/pane-layout/pane-layout.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-padding($composition) {\n  @if $composition {\n    padding-#{$composition}: 2.5rem;\n  }\n}\n\n@mixin set-absolute($composition) {\n  @if $composition {\n    position: absolute;\n    #{$composition}: 0;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .side-panes-wrapper {\n    height: 100%;\n    width: 100%;\n  }\n\n  .row {\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  .col {\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    position: relative;\n  }\n\n  .content {\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n  }\n\n  .absolute-top {\n    width: 100%;\n    @include set-absolute(top);\n  }\n\n  .absolute-bottom {\n    width: 100%;\n    @include set-absolute(bottom);\n  }\n\n  .absolute-left {\n    height: 100%;\n    @include set-absolute(left);\n  }\n\n  .absolute-right {\n    height: 100%;\n    @include set-absolute(right);\n  }\n\n  .padding-top {\n    @include set-padding(top);\n  }\n\n  .padding-bottom {\n    @include set-padding(bottom);\n  }\n\n  .padding-left {\n    @include set-padding(left);\n  }\n\n  .padding-right {\n    @include set-padding(right);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { Composition } from '../pane/pane';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-pane-layout',\n  styleUrl: 'pane-layout.scss',\n  shadow: true,\n})\nexport class Panes {\n  @Element() hostElement: HTMLIxPaneLayoutElement;\n\n  /**\n   * Choose the layout of the panes.\n   * When set to 'full-vertical' the vertical panes (left, right) will get the full height.\n   * When set to 'full-horizontal' the horizontal panes (top, bottom) will get the full width.\n   */\n  @Prop() layout: 'full-vertical' | 'full-horizontal' = 'full-vertical';\n\n  /**\n   * Set the default variant for all panes in the layout\n   */\n  @Prop() variant: 'floating' | 'inline' = 'inline';\n\n  /**\n   * Set the default border state for all panes in the layout\n   */\n  @Prop() borderless: boolean = false;\n\n  @State() private isMobile = false;\n  @State() private paneElements = 0;\n\n  private panes: Array<{\n    slot: string;\n    hideOnCollapse: boolean;\n    floating: boolean;\n  }> = [];\n\n  private observer: MutationObserver;\n\n  get currentPanes() {\n    return this.hostElement.querySelectorAll('ix-pane');\n  }\n\n  componentWillLoad() {\n    this.paneElements = this.currentPanes.length;\n\n    this.observer = new MutationObserver((mutations) => {\n      if (mutations[0].addedNodes.item(0)?.nodeName === 'IX-PANE') {\n        this.paneElements += 1;\n      } else if (mutations[0].removedNodes.item(0)?.nodeName === 'IX-PANE') {\n        this.paneElements -= 1;\n      }\n    });\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n\n    this.isMobile = matchBreakpoint('sm');\n    applicationLayoutService.onChange.on(() => {\n      this.isMobile = matchBreakpoint('sm');\n    });\n  }\n\n  componentDidLoad() {\n    this.setPanes(this.currentPanes);\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  private setPaneVariant(pane: HTMLIxPaneElement) {\n    if (!pane.ignoreLayoutSettings) {\n      pane.variant = this.variant;\n    }\n  }\n\n  private setPaneBorder(pane: HTMLIxPaneElement) {\n    if (!pane.ignoreLayoutSettings) {\n      if (this.borderless) {\n        pane.borderless = true;\n      } else {\n        const hasVisibleLeftPane = !!this.panes.find(\n          (pane) => pane.slot === 'left' && !pane.hideOnCollapse\n        );\n        if (\n          pane.variant === 'floating' &&\n          this.layout === 'full-vertical' &&\n          hasVisibleLeftPane &&\n          (pane.composition === 'top' || pane.composition === 'bottom')\n        ) {\n          pane.borderless = true;\n        } else {\n          pane.borderless = false;\n        }\n      }\n    }\n  }\n\n  private setPaneZIndex(pane: HTMLIxPaneElement) {\n    const isTop = pane.slot === 'top';\n    const isBottom = pane.slot === 'bottom';\n    const isLeft = pane.slot === 'left';\n    const isRight = pane.slot === 'right';\n\n    let zIndex = 1;\n    if (this.isMobile) {\n      if (isBottom || isTop) {\n        zIndex = 3;\n      }\n    } else {\n      if (this.layout === 'full-vertical') {\n        if (isLeft || isRight) {\n          zIndex = 3;\n        }\n      } else {\n        if (isBottom || isTop) {\n          zIndex = 3;\n        }\n      }\n    }\n    pane.style.zIndex = zIndex.toString();\n  }\n\n  private setPanes(panes: NodeListOf<HTMLIxPaneElement>) {\n    this.panes = [];\n    panes.forEach((pane) => {\n      this.panes.push({\n        slot: pane.slot,\n        hideOnCollapse: pane.hideOnCollapse,\n        floating: pane.variant === 'floating',\n      });\n    });\n  }\n\n  private closeFloatingPanes() {\n    this.currentPanes.forEach((pane) => {\n      if (pane.expanded && pane.variant === 'floating') {\n        pane.expanded = false;\n      }\n    });\n  }\n\n  private configurePanes() {\n    let topCount = 0;\n    let bottomCount = 0;\n    let leftCount = 0;\n    let rightCount = 0;\n\n    this.currentPanes.forEach((pane) => {\n      const isTop = pane.slot === 'top';\n      const isBottom = pane.slot === 'bottom';\n      const isLeft = pane.slot === 'left';\n      const isRight = pane.slot === 'right';\n\n      if (isLeft) {\n        if (leftCount) {\n          pane.slot = undefined;\n          return;\n        }\n        leftCount++;\n      } else if (isRight) {\n        if (rightCount) {\n          pane.slot = undefined;\n          return;\n        }\n        rightCount++;\n      } else if (isTop) {\n        if (topCount) {\n          pane.slot = undefined;\n          return;\n        }\n        topCount++;\n      } else if (isBottom) {\n        if (bottomCount) {\n          pane.slot = undefined;\n          return;\n        }\n        bottomCount++;\n      } else {\n        pane.slot = undefined;\n        return;\n      }\n\n      this.setPaneVariant(pane);\n      this.setPaneBorder(pane);\n      this.setPaneZIndex(pane);\n    });\n\n    this.setPanes(this.currentPanes);\n    forceUpdate(this.hostElement);\n  }\n\n  @Listen('slotChanged')\n  onSlotChanged() {\n    this.configurePanes();\n  }\n\n  @Listen('hideOnCollapseChanged')\n  onCollapsibleChanged(event: CustomEvent) {\n    const { slot, hideOnCollapse } = event.detail;\n\n    this.panes.forEach((currentSlot) => {\n      if (currentSlot.slot === slot) {\n        currentSlot.hideOnCollapse = hideOnCollapse;\n      }\n    });\n\n    forceUpdate(this.hostElement);\n  }\n\n  @Listen('variantChanged')\n  onVariantChanged(event: CustomEvent) {\n    const { slot, variant } = event.detail;\n\n    this.panes.forEach((currentSlot) => {\n      if (currentSlot.slot === slot) {\n        currentSlot.floating = variant === 'floating';\n      }\n    });\n\n    forceUpdate(this.hostElement);\n  }\n\n  @Watch('paneElements')\n  onPaneElementsChange() {\n    this.configurePanes();\n  }\n\n  @Watch('variant')\n  onVariableChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneVariant(pane);\n      this.setPaneBorder(pane);\n    });\n\n    this.setPanes(this.currentPanes);\n    forceUpdate(this.hostElement);\n  }\n\n  @Watch('borderless')\n  onBorderChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneBorder(pane);\n    });\n  }\n\n  @Watch('layout')\n  onLayoutChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneBorder(pane);\n      this.setPaneZIndex(pane);\n    });\n  }\n\n  @Watch('isMobile')\n  onMobileChange() {\n    this.currentPanes.forEach((pane) => {\n      this.setPaneZIndex(pane);\n    });\n  }\n\n  private hasPadding(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return pane ? !pane.hideOnCollapse && pane.floating : false;\n  }\n\n  private hasPaddingMobile(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return pane && !pane.hideOnCollapse;\n  }\n\n  private slotExists(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return !!pane;\n  }\n\n  private isFloating(composition: Composition) {\n    const pane = this.panes.find((pane) => pane.slot === composition);\n    return pane ? pane.floating : false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.isMobile ? (\n          this.layout == 'full-vertical' ? (\n            <div class=\"side-panes-wrapper\">\n              <div\n                class={{\n                  row: true,\n                  'padding-left': this.hasPadding('left'),\n                  'padding-right': this.hasPadding('right'),\n                }}\n              >\n                <div\n                  key=\"left\"\n                  class={{ 'absolute-left': this.isFloating('left') }}\n                >\n                  <slot name=\"left\"></slot>\n                </div>\n                <div\n                  class={{\n                    col: true,\n                    'padding-top': this.hasPadding('top'),\n                    'padding-bottom': this.hasPadding('bottom'),\n                  }}\n                >\n                  <div\n                    key=\"top\"\n                    class={{ 'absolute-top': this.isFloating('top') }}\n                  >\n                    <slot name=\"top\"></slot>\n                  </div>\n                  <div\n                    key=\"content\"\n                    class=\"content\"\n                    onClick={() => this.closeFloatingPanes()}\n                  >\n                    <slot name=\"content\"></slot>\n                  </div>\n                  <div\n                    key=\"bottom\"\n                    class={{ 'absolute-bottom': this.isFloating('bottom') }}\n                  >\n                    <slot name=\"bottom\"></slot>\n                  </div>\n                </div>\n                <div\n                  key=\"right\"\n                  class={{ 'absolute-right': this.isFloating('right') }}\n                >\n                  <slot name=\"right\"></slot>\n                </div>\n              </div>\n            </div>\n          ) : (\n            <div class=\"side-panes-wrapper\">\n              <div\n                class={{\n                  col: true,\n                  'padding-top': this.hasPadding('top'),\n                  'padding-bottom': this.hasPadding('bottom'),\n                }}\n              >\n                <div\n                  key=\"top\"\n                  class={{ 'absolute-top': this.isFloating('top') }}\n                >\n                  <slot name=\"top\"></slot>\n                </div>\n                <div\n                  class={{\n                    row: true,\n                    'padding-left': this.hasPadding('left'),\n                    'padding-right': this.hasPadding('right'),\n                  }}\n                >\n                  <div\n                    key=\"left\"\n                    class={{ 'absolute-left': this.isFloating('left') }}\n                  >\n                    <slot name=\"left\"></slot>\n                  </div>\n                  <div\n                    key=\"content\"\n                    class=\"content\"\n                    onClick={() => this.closeFloatingPanes()}\n                  >\n                    <slot name=\"content\"></slot>\n                  </div>\n                  <div\n                    key=\"right\"\n                    class={{ 'absolute-right': this.isFloating('right') }}\n                  >\n                    <slot name=\"right\"></slot>\n                  </div>\n                </div>\n                <div\n                  key=\"bottom\"\n                  class={{ 'absolute-bottom': this.isFloating('bottom') }}\n                >\n                  <slot name=\"bottom\"></slot>\n                </div>\n              </div>\n            </div>\n          )\n        ) : (\n          <div class=\"col\">\n            <div\n              key=\"top\"\n              style={{\n                minHeight: this.hasPaddingMobile('top') ? '48px' : '0',\n                display: this.slotExists('top') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"top\"></slot>\n            </div>\n            <div\n              key=\"left\"\n              style={{\n                minHeight: this.hasPaddingMobile('left') ? '48px' : '0',\n                display: this.slotExists('left') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"left\"></slot>\n            </div>\n            <div\n              key=\"content\"\n              class=\"content\"\n              onClick={() => this.closeFloatingPanes()}\n            >\n              <slot name=\"content\"></slot>\n            </div>\n            <div\n              key=\"right\"\n              style={{\n                minHeight: this.hasPaddingMobile('right') ? '48px' : '0',\n                display: this.slotExists('right') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"right\"></slot>\n            </div>\n            <div\n              key=\"bottom\"\n              style={{\n                minHeight: this.hasPaddingMobile('bottom') ? '48px' : '0',\n                display: this.slotExists('bottom') ? 'block' : 'none',\n              }}\n            >\n              <slot name=\"bottom\"></slot>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-b8ed7953.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as a,g as c}from"./p-f86a894a.js";const e=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;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)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}: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)){--ix-card-border-color:transparent}:host(.card-insight:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification: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){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification: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){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification){--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=e;const d=class{constructor(o){r(this,o);this.variant="insight";this.selected=undefined}render(){return o(a,{key:"f91df8c114ec01e95ae0eba29c8acf3cacbdec25",class:{selected:this.selected,[`card-${this.variant}`]:true}},o("div",{key:"24c775b7ae7b2940df9e101b702b91a17a0f6749",class:"card-content"},o("slot",{key:"57bfc8eb49985aae6aff8ea277475b2012ac8ba2"})),o("div",{key:"8eac7eefd8020827e0ebf38be231de2c7b934797",class:"card-footer"},o("slot",{key:"207dc0b0ce6279ecb9dfda76e3d03a145a5ff168",name:"card-accordion"})))}get hostElement(){return c(this)}};d.style=t;const i=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;gap:0.5rem;padding:1rem;height:100%}: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}";const s=i;const l=class{constructor(o){r(this,o)}render(){return o(a,{key:"afb985c12152039a92c11925d283c35d2e63d9f0"},o("slot",{key:"0d05bd2d9eb17437831df580cc9e9822880ef01e"}))}};l.style=s;export{d as ix_card,l as ix_card_content};
+//# sourceMappingURL=p-b8ed7953.entry.js.map