npm - @siemens/ix - Versions diffs - 0.0.0-20240419081748 - Mend

@siemens/ix 0.0.0-20240419081748

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

Files changed (2134) hide show

package/dist/esm/ix-col_4.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-col.ix-date-picker.ix-layout-grid.ix-row.entry.js","mappings":"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","names":["DateTime","Info"],"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 ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n <span class=\"fontSize capitalize\">\n {this.monthNames[this.selectedMonth]} {this.selectedYear}\n </span>\n </ix-button>\n <ix-dropdown\n class=\"dropdown\"\n trigger={this.dropdownButtonRef}\n placement=\"bottom-start\"\n >\n <div class=\"wrapper\">\n <div\n class=\"overflow\"\n onScroll={() => this.infiniteScrollYears()}\n ref={(ref) => (this.yearContainerRef = ref)}\n >\n {this.renderYears()}\n </div>\n <div class=\"overflow\">\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"],"version":3}

package/dist/esm/ix-content-header.entry.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-f18c5ad1.js';
+const contentHeaderCss = ":host{display:flex;flex-direction:row;align-items:flex-start;padding:0px}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0%}:host .subtitle{margin-top:0.5rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";
+const IxContentHeaderStyle0 = contentHeaderCss;
+const ContentHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.backButtonClick = createEvent(this, "backButtonClick", 7);
+        this.variant = 'primary';
+        this.headerTitle = undefined;
+        this.headerSubtitle = undefined;
+        this.hasBackButton = false;
+    }
+    render() {
+        return (h(Host, { key: 'eae27014039b16c023892b60cc904609e55b89ad' }, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "primary", icon: 'arrow-left', ghost: true, onClick: () => this.backButtonClick.emit() })) : null, h("div", { key: '397be2503715bb15d260bcfada2260a8eb72e33b', class: "titleGroup" }, h("ix-typography", { key: '5d08e001eb5178aaf4b089a4faa15bc759a43b6b', variant: this.variant === 'secondary' ? 'large-single' : 'h2' }, this.headerTitle), this.headerSubtitle !== undefined ? (h("ix-typography", { variant: 'caption', color: 'soft', class: "subtitle" }, this.headerSubtitle)) : null), h("div", { key: '6c6cc165c96307a6ee2c2bec59a80d6cd62a02cf', class: "buttons" }, h("slot", { key: '0ac3730bb5ec852b127554e8dbdd73970204e275' }))));
+    }
+};
+ContentHeader.style = IxContentHeaderStyle0;
+export { ContentHeader as ix_content_header };
+//# sourceMappingURL=ix-content-header.entry.js.map

package/dist/esm/ix-content-header.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-content-header.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,iPAAiP,CAAC;AAC3Q,8BAAe,gBAAgB;;MCiBlB,aAAa;;;;uBAIgB,SAAS;;8BAUJ,SAAS;6BAKrB,KAAK;;IAOtC,MAAM;QACJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,aAAa,IACjB,sBACE,KAAK,EAAE,YAAY,EACnB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,GAC1B,IAChB,IAAI,EAER,4DAAK,KAAK,EAAC,YAAY,IACrB,sEACE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,GAAG,cAAc,GAAG,IAAI,IAE5D,IAAI,CAAC,WAAW,CACH,EACf,IAAI,CAAC,cAAc,KAAK,SAAS,IAChC,qBAAe,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC,UAAU,IAC/D,IAAI,CAAC,cAAc,CACN,IACd,IAAI,CACJ,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAQ,CACJ,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/content-header/content-header.scss?tag=ix-content-header&encapsulation=shadow","src/components/content-header/content-header.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:host {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n\n .titleGroup {\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n }\n\n .subtitle {\n margin-top: 0.5rem;\n }\n\n .backButton {\n margin-right: 0.5rem;\n }\n\n .buttons {\n flex: 0 0 auto;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type ContentHeaderVariant = 'primary' | 'secondary';\n\n@Component({\n tag: 'ix-content-header',\n styleUrl: 'content-header.scss',\n shadow: true,\n})\nexport class ContentHeader {\n /**\n * Variant of content header\n */\n @Prop() variant: ContentHeaderVariant = 'primary';\n\n /**\n * Title of Header\n */\n @Prop() headerTitle: string;\n\n /**\n * Subtitle of Header\n */\n @Prop() headerSubtitle: string | undefined = undefined;\n\n /**\n * Display a back button\n */\n @Prop() hasBackButton: boolean = false;\n\n /**\n * Triggered when back button is clicked\n */\n @Event() backButtonClick: EventEmitter<void>;\n\n render() {\n return (\n <Host>\n {this.hasBackButton ? (\n <ix-icon-button\n class={'backButton'}\n variant=\"primary\"\n icon={'arrow-left'}\n ghost={true}\n onClick={() => this.backButtonClick.emit()}\n ></ix-icon-button>\n ) : null}\n\n <div class=\"titleGroup\">\n <ix-typography\n variant={this.variant === 'secondary' ? 'large-single' : 'h2'}\n >\n {this.headerTitle}\n </ix-typography>\n {this.headerSubtitle !== undefined ? (\n <ix-typography variant={'caption'} color={'soft'} class=\"subtitle\">\n {this.headerSubtitle}\n </ix-typography>\n ) : null}\n </div>\n <div class=\"buttons\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-content.entry.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { h as hasSlottedElements } from './shadow-dom-60e9243d.js';
+const contentCss = ":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{flex-grow:1;overflow:auto;padding-right:1.5rem}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";
+const IxContentStyle0 = contentCss;
+const Content = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isContentHeaderSlotted = false;
+    }
+    get contentHeaderSlot() {
+        return this.hostElement.shadowRoot.querySelector('.content-header slot');
+    }
+    render() {
+        return (h(Host, { key: '7298c4abd09355a3ee73d4a236e7025a72720cf7' }, h("div", { key: 'd7ba3fbc44d66ba0ae4e747a5cc5d77c7388b138', class: {
+                'content-header': true,
+                slotted: this.isContentHeaderSlotted,
+            } }, h("slot", { key: '233200870318a9276d3e0d5c5d5d03980fbe1793', name: "header", onSlotchange: () => {
+                this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
+            } })), h("div", { key: 'ee7f8ceb237b4c33d578262c74d4eca9bdf36070', class: "content" }, h("slot", { key: 'fbbf86e9c454f04dbe33a9b0456f1cd02ec72c02' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+Content.style = IxContentStyle0;
+export { Content as ix_content };
+//# sourceMappingURL=ix-content.entry.js.map

package/dist/esm/ix-content.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-content.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,q2BAAq2B,CAAC;AACz3B,wBAAe,UAAU;;MCoBZ,OAAO;;;sCAGgB,KAAK;;IAEvC,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC9C,sBAAsB,CACJ,CAAC;KACtB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,OAAO,EAAE,IAAI,CAAC,sBAAsB;aACrC,IAED,6DACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE;gBACZ,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAC9C,IAAI,CAAC,iBAAiB,CACvB,CAAC;aACH,GACK,CACJ,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/content/content.scss?tag=ix-content&encapsulation=shadow","src/components/content/content.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 display: flex;\n flex-direction: column;\n position: relative;\n padding: 1.5rem 0rem 0.25rem 2rem;\n\n width: 100%;\n height: 100%;\n\n overflow: hidden;\n\n .content {\n flex-grow: 1;\n overflow: auto;\n padding-right: 1.5rem;\n }\n\n .content-header.slotted {\n margin-bottom: 1rem;\n padding-right: 1.5rem;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @since 2.1.0\n * @slot header - Display content at the top of the content page\n */\n@Component({\n tag: 'ix-content',\n styleUrl: 'content.scss',\n shadow: true,\n})\nexport class Content {\n @Element() hostElement!: HTMLIxContentElement;\n\n @State() isContentHeaderSlotted = false;\n\n get contentHeaderSlot() {\n return this.hostElement.shadowRoot.querySelector(\n '.content-header slot'\n ) as HTMLSlotElement;\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'content-header': true,\n slotted: this.isContentHeaderSlotted,\n }}\n >\n <slot\n name=\"header\"\n onSlotchange={() => {\n this.isContentHeaderSlotted = hasSlottedElements(\n this.contentHeaderSlot\n );\n }}\n ></slot>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-css-grid-item.entry.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host } from './index-f18c5ad1.js';
+const cssGridItemCss = ":host{display:block;position:relative}:host ::slotted(*){height:100%;width:100%}";
+const IxCssGridItemStyle0 = cssGridItemCss;
+const CssGridItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemName = undefined;
+    }
+    render() {
+        const style = {};
+        style['grid-area'] = this.itemName;
+        return (h(Host, { key: '7eb12cf19328a03e78db24d81bc88158b37e7e4c', style: style }, h("slot", { key: '123dfc3d9459ae11ed038f5c20db4597f6fb6c42' })));
+    }
+};
+CssGridItem.style = IxCssGridItemStyle0;
+export { CssGridItem as ix_css_grid_item };
+//# sourceMappingURL=ix-css-grid-item.entry.js.map

package/dist/esm/ix-css-grid-item.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-css-grid-item.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kFAAkF,CAAC;AAC1G,4BAAe,cAAc;;MCkBhB,WAAW;;;;;IAMtB,MAAM;QACJ,MAAM,KAAK,GAAG,EAAE,CAAC;QACjB,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QAEnC,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK,IAChB,8DAAa,CACR,EACP;KACH;;;;;;","names":[],"sources":["src/components/css-grid/css-grid-item.scss?tag=ix-css-grid-item&encapsulation=shadow","src/components/css-grid/css-grid-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n:host {\n display: block;\n position: relative;\n\n ::slotted(*) {\n height: 100%;\n width: 100%;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @internal\n */\n@Component({\n tag: 'ix-css-grid-item',\n styleUrl: 'css-grid-item.scss',\n shadow: true,\n})\nexport class CssGridItem {\n /**\n * Grid item name\n */\n @Prop() itemName: string;\n\n render() {\n const style = {};\n style['grid-area'] = this.itemName;\n\n return (\n <Host style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-css-grid.entry.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { r as registerInstance, h, H as Host } from './index-f18c5ad1.js';
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function templateBuilder(inputTemplate) {
+    let templateString = '';
+    inputTemplate.forEach((row) => {
+        templateString += '"';
+        templateString = row.reduce((pV, cV) => {
+            return `${pV} ${cV}`;
+        }, templateString);
+        templateString += '"\n';
+    });
+    return templateString;
+}
+const cssGridCss = ":host{display:grid;position:relative;row-gap:1.5rem;-moz-column-gap:1.5rem;column-gap:1.5rem}";
+const IxCssGridStyle0 = cssGridCss;
+const smQuery = 'only screen and (max-width: 576px)';
+const mdQuery = 'only screen and (max-width: 768px)';
+const lgQuery = 'only screen and (max-width: 992px)';
+const mediaQueryCollection = [
+    { name: 'sm', query: smQuery },
+    { name: 'md', query: mdQuery },
+    { name: 'lg', query: lgQuery },
+];
+const CssGrid = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disposeMediaQueryListener = [];
+        this.mediaQueries = [];
+        this.templates = undefined;
+        this.currentTemplate = undefined;
+    }
+    componentWillRender() {
+        this.mediaQueries = mediaQueryCollection.map((query) => {
+            const mediaQuery = window.matchMedia(query.query);
+            const callback = () => {
+                this.applyTemplate();
+            };
+            this.disposeMediaQueryListener.push(callback);
+            mediaQuery.addEventListener('change', callback);
+            return Object.assign(Object.assign({}, query), { mediaQuery });
+        });
+        this.applyTemplate();
+    }
+    disconnectedCallback() {
+        this.mediaQueries.forEach((mq, index) => {
+            mq.mediaQuery.removeEventListener('change', this.disposeMediaQueryListener[index]);
+        });
+    }
+    findNextTemplate(type) {
+        const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);
+        const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];
+        if (!nextTemplate) {
+            return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);
+        }
+        return nextTemplate;
+    }
+    applyTemplate() {
+        let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);
+        if (!active) {
+            active = this.mediaQueries[this.mediaQueries.length - 1];
+        }
+        const template = this.templates[active.name];
+        if (template) {
+            this.currentTemplate = template;
+        }
+        else {
+            this.currentTemplate = this.findNextTemplate(active.name);
+        }
+    }
+    render() {
+        var _a;
+        const style = {};
+        if (((_a = this.currentTemplate) === null || _a === void 0 ? void 0 : _a.length) !== 0) {
+            style['grid-template-areas'] = templateBuilder(this.currentTemplate);
+        }
+        return (h(Host, { key: '31dbf56817566809d11389e2ee8eae5184ca31f4', style: style }, h("slot", { key: '4573979348fcaac389e59014eb566ad0b7e4c005' })));
+    }
+};
+CssGrid.style = IxCssGridStyle0;
+export { CssGrid as ix_css_grid };
+//# sourceMappingURL=ix-css-grid.entry.js.map

package/dist/esm/ix-css-grid.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-css-grid.entry.js","mappings":"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","names":[],"sources":["src/components/css-grid/builder.ts","src/components/css-grid/css-grid.scss?tag=ix-css-grid&encapsulation=shadow","src/components/css-grid/css-grid.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport function templateBuilder(inputTemplate: string[][]) {\n let templateString = '';\n\n inputTemplate.forEach((row) => {\n templateString += '\"';\n templateString = row.reduce((pV, cV) => {\n return `${pV} ${cV}`;\n }, templateString);\n templateString += '\"\\n';\n });\n\n return templateString;\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\n:host {\n display: grid;\n position: relative;\n row-gap: $large-space;\n column-gap: $large-space;\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, State } from '@stencil/core';\nimport { templateBuilder } from './builder';\n\nconst smQuery = 'only screen and (max-width: 576px)';\nconst mdQuery = 'only screen and (max-width: 768px)';\nconst lgQuery = 'only screen and (max-width: 992px)';\n\nexport type CssGridTemplateType = 'sm' | 'md' | 'lg';\n\nconst mediaQueryCollection: Array<{\n name: CssGridTemplateType;\n query: string;\n}> = [\n { name: 'sm', query: smQuery },\n { name: 'md', query: mdQuery },\n { name: 'lg', query: lgQuery },\n];\n\n/**\n * @internal\n */\n@Component({\n tag: 'ix-css-grid',\n styleUrl: 'css-grid.scss',\n shadow: true,\n})\nexport class CssGrid {\n /**\n * Define css grid template\n */\n @Prop() templates: Partial<Record<CssGridTemplateType, string[][]>>;\n\n @State() currentTemplate: string[][];\n\n private disposeMediaQueryListener: ((event: MediaQueryListEvent) => void)[] =\n [];\n private mediaQueries: {\n mediaQuery: MediaQueryList;\n name: CssGridTemplateType;\n query: string;\n }[] = [];\n\n componentWillRender() {\n this.mediaQueries = mediaQueryCollection.map((query) => {\n const mediaQuery = window.matchMedia(query.query);\n\n const callback = () => {\n this.applyTemplate();\n };\n this.disposeMediaQueryListener.push(callback);\n mediaQuery.addEventListener('change', callback);\n\n return {\n ...query,\n mediaQuery,\n };\n });\n\n this.applyTemplate();\n }\n\n disconnectedCallback() {\n this.mediaQueries.forEach((mq, index) => {\n mq.mediaQuery.removeEventListener(\n 'change',\n this.disposeMediaQueryListener[index]\n );\n });\n }\n\n private findNextTemplate(type: CssGridTemplateType) {\n const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);\n const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];\n if (!nextTemplate) {\n return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);\n }\n return nextTemplate;\n }\n\n private applyTemplate() {\n let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);\n\n if (!active) {\n active = this.mediaQueries[this.mediaQueries.length - 1];\n }\n\n const template = this.templates[active.name];\n\n if (template) {\n this.currentTemplate = template;\n } else {\n this.currentTemplate = this.findNextTemplate(active.name);\n }\n }\n\n render() {\n const style = {};\n if (this.currentTemplate?.length !== 0) {\n style['grid-template-areas'] = templateBuilder(this.currentTemplate);\n }\n return (\n <Host style={style}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-date-dropdown.entry.js ADDED Viewed

@@ -0,0 +1,153 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { D as DateTime_1 } from './luxon-aa110584.js';
+const dateDropdownCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";
+const IxDateDropdownStyle0 = dateDropdownCss;
+const DateDropdown = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
+        this.datePickerTouched = false;
+        this.format = 'yyyy/LL/dd';
+        this.range = true;
+        this.from = undefined;
+        this.to = undefined;
+        this.minDate = undefined;
+        this.maxDate = undefined;
+        this.dateRangeId = 'custom';
+        this.customRangeAllowed = true;
+        this.dateRangeOptions = [];
+        this.i18nCustomItem = 'Custom...';
+        this.i18nDone = 'Done';
+        this.i18nNoRange = 'No range set';
+        this.today = DateTime_1.now().toISO();
+        this.selectedDateRangeId = undefined;
+        this.currentRangeValue = undefined;
+        this.triggerRef = undefined;
+    }
+    onDateRangeIdChange() {
+        this.onRangeListSelect(this.dateRangeId);
+        this.updateCurrentDate();
+        this.setDateRangeSelection(this.dateRangeId);
+        this.onDateSelect({
+            from: this.currentRangeValue.from,
+            to: this.currentRangeValue.to,
+            id: this.currentRangeValue.id,
+        });
+    }
+    onDateRangeOptionsChange() {
+        this.initialize();
+        this.onDateRangeIdChange();
+    }
+    componentWillLoad() {
+        this.initialize();
+        this.setDateRangeSelection(this.dateRangeId);
+    }
+    /**
+     * Retrieves the currently selected date range from the component.
+     * This method returns the selected date range as a `DateChangeEvent` object.
+     */
+    async getDateRange() {
+        return this.currentRangeValue;
+    }
+    initialize() {
+        const isCustomRange = this.dateRangeId === 'custom' ||
+            (!this.dateRangeId && !!this.from && !!this.to);
+        if (isCustomRange && this.customRangeAllowed) {
+            this.selectedDateRangeId = 'custom';
+            this.updateCurrentDate();
+            return;
+        }
+        const isValidConfiguration = !isCustomRange && !this.from;
+        if (!isValidConfiguration) {
+            console.warn('"from" and "range-date-id" is provided this is an invalid combination. Using "custom".');
+            this.selectedDateRangeId = 'custom';
+            this.updateCurrentDate();
+            return;
+        }
+    }
+    updateCurrentDate() {
+        this.currentRangeValue = {
+            id: this.selectedDateRangeId,
+            from: this.from,
+            to: this.to,
+        };
+    }
+    onDateSelect(rangeValue, preserveDropdown = true) {
+        this.dateRangeChange.emit(rangeValue);
+        if (preserveDropdown) {
+            this.closeDropdown();
+        }
+        this.datePickerTouched = false;
+    }
+    onRangeListSelect(id) {
+        if (this.setDateRangeSelection(id)) {
+            this.onDateSelect(this.currentRangeValue);
+        }
+    }
+    setDateRangeSelection(id) {
+        this.selectedDateRangeId = id;
+        const option = this.dateRangeOptions.find((range) => range.id === id);
+        if (option) {
+            this.currentRangeValue = option;
+        }
+        return option;
+    }
+    closeDropdown() {
+        this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;
+    }
+    getButtonLabel() {
+        var _a, _b;
+        if (this.selectedDateRangeId === 'custom' && ((_a = this.currentRangeValue) === null || _a === void 0 ? void 0 : _a.from)) {
+            let range = this.currentRangeValue.from;
+            if (this.currentRangeValue.to) {
+                range += ` - ${this.currentRangeValue.to}`;
+            }
+            return range;
+        }
+        if (!this.selectedDateRangeId) {
+            return this.i18nNoRange;
+        }
+        if (!this.dateRangeOptions || ((_b = this.dateRangeOptions) === null || _b === void 0 ? void 0 : _b.length) === 0) {
+            return this.i18nNoRange;
+        }
+        const option = this.dateRangeOptions.find((option) => option.id === this.selectedDateRangeId);
+        if (!option) {
+            console.error(`Cannot find range option with id ${this.selectedDateRangeId}`);
+            return this.i18nNoRange;
+        }
+        return option.label;
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: 'c1460a1ff367334dd5dccd26ddfdb8dbe333d1f9' }, h("ix-button", { key: '5cfaf26928ec4afd00986e9c2d9c912776d208fb', "data-date-dropdown-trigger": true, variant: "primary", icon: "history", ref: (ref) => (this.triggerRef = ref) }, this.getButtonLabel()), h("ix-dropdown", { key: '55678d235dae3f2171863921b67943e15f555f9d', "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef, "close-behavior": "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+                if (!show &&
+                    this.selectedDateRangeId === 'custom' &&
+                    this.datePickerTouched) {
+                    this.onDateSelect(this.currentRangeValue);
+                }
+            } }, h("ix-layout-grid", { key: '8c278991b47f5feeff74df783f37dfae99027a3a', "no-margin": "true" }, h("ix-row", { key: 'f7b9d0cbae4cae970df394aaa17a1e2907c3c661' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { class: {
+                'no-margin': true,
+                'border-right': this.selectedDateRangeId === 'custom',
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '7a5b3ed06d888f5b90f34901e83dfbbda898e7a8', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, null, h("ix-date-picker", { standaloneAppearance: false, onDateChange: (e) => {
+                e.stopPropagation();
+                this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
+                this.datePickerTouched = true;
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { class: "pull-right" }, h("ix-button", { onClick: () => {
+                this.onDateSelect(this.currentRangeValue);
+            } }, this.i18nDone))))))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "dateRangeId": ["onDateRangeIdChange"],
+        "to": ["onDateRangeIdChange"],
+        "from": ["onDateRangeIdChange"],
+        "dateRangeOptions": ["onDateRangeOptionsChange"]
+    }; }
+};
+DateDropdown.style = IxDateDropdownStyle0;
+export { DateDropdown as ix_date_dropdown };
+//# sourceMappingURL=ix-date-dropdown.entry.js.map

package/dist/esm/ix-date-dropdown.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-date-dropdown.entry.js","mappings":"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","names":["DateTime"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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 {\n @include ix-component;\n display: inline-block;\n position: relative;\n\n @media (max-width: 48em) {\n .min-width {\n width: min-content;\n }\n }\n\n @media (min-width: 48em) {\n .border-right {\n border-right: var(--theme-x-weak-bdr-2);\n }\n }\n\n ix-button {\n width: 100%;\n }\n\n .max-height {\n max-height: max-content;\n }\n\n .no-margin {\n margin: 0;\n padding: 0;\n }\n\n .pull-right {\n float: right;\n padding: $tiny-space $default-space;\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 { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n id: string;\n label: string;\n from: string;\n to: string;\n};\n\nexport type DateRangeChangeEvent = {\n id: string;\n from: string;\n to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n tag: 'ix-date-dropdown',\n styleUrl: 'date-dropdown.scss',\n shadow: true,\n})\nexport class DateDropdown {\n @Element() hostElement: HTMLIxDateDropdownElement;\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 = 'yyyy/LL/dd';\n\n /**\n * If true a range of dates can be selected.\n */\n @Prop() range = true;\n\n /**\n * Picker date. If the picker is in range mode this property is the start date.\n * If set to `null` no default start date will be pre-selected.\n *\n * Format is based on `format`\n */\n @Prop() from: string;\n\n /**\n * Picker date. If the picker is in range mode this property is the end date.\n * If the picker is not in range mode leave this value `null`\n *\n * Format is based on `format`\n */\n @Prop() to: string;\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 @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 @Prop() maxDate: string;\n\n /**\n * Used to set the initial select date range as well as the button name,\n * if not set or no according date range label is found, nothing will be selected\n */\n @Prop() dateRangeId = 'custom';\n @Watch('dateRangeId')\n @Watch('to')\n @Watch('from')\n onDateRangeIdChange() {\n this.onRangeListSelect(this.dateRangeId);\n this.updateCurrentDate();\n this.setDateRangeSelection(this.dateRangeId);\n\n this.onDateSelect({\n from: this.currentRangeValue.from,\n to: this.currentRangeValue.to,\n id: this.currentRangeValue.id,\n });\n }\n\n /**\n * Controls whether the user is allowed to pick custom date ranges in the component.\n * When set to 'true', the user can select a custom date range using the date picker.\n * When set to 'false', only predefined time date ranges are available for selection.\n */\n @Prop() customRangeAllowed = true;\n\n /**\n * An array of predefined date range options for the date picker.\n * Each option is an object with a label describing the range and a function\n * that returns the start and end dates of the range as a DateRangeOption object.\n *\n * Example format:\n * {\n * id: 'some unique id',\n * label: 'Name of the range',\n * from: undefined, to: '2023/03/29'\n * },\n * // ... other predefined date range options ...\n */\n @Prop() dateRangeOptions: DateDropdownOption[] = [];\n @Watch('dateRangeOptions')\n onDateRangeOptionsChange() {\n this.initialize();\n this.onDateRangeIdChange();\n }\n\n /**\n * Text for custom dropdown item. Will be used for translation.\n */\n @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n /**\n * Text for the done button. Will be used for translation.\n */\n @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n /**\n * Text for the done button. Will be used for translation.\n */\n @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n /** @internal */\n @Prop() today = DateTime.now().toISO();\n\n /**\n * EventEmitter for date range change events.\n *\n * This event is emitted when the date range changes within the component.\n * The event payload contains information about the selected date range.\n */\n @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n @State() private selectedDateRangeId: 'custom' | (string & {});\n @State() private currentRangeValue: {\n from: string;\n to: string;\n id: string;\n };\n @State() private triggerRef: HTMLElement;\n\n private datePickerTouched = false;\n\n componentWillLoad() {\n this.initialize();\n this.setDateRangeSelection(this.dateRangeId);\n }\n\n /**\n * Retrieves the currently selected date range from the component.\n * This method returns the selected date range as a `DateChangeEvent` object.\n */\n @Method()\n public async getDateRange(): Promise<DateRangeChangeEvent> {\n return this.currentRangeValue;\n }\n\n private initialize() {\n const isCustomRange =\n this.dateRangeId === 'custom' ||\n (!this.dateRangeId && !!this.from && !!this.to);\n\n if (isCustomRange && this.customRangeAllowed) {\n this.selectedDateRangeId = 'custom';\n this.updateCurrentDate();\n\n return;\n }\n const isValidConfiguration = !isCustomRange && !this.from;\n if (!isValidConfiguration) {\n console.warn(\n '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n );\n\n this.selectedDateRangeId = 'custom';\n this.updateCurrentDate();\n\n return;\n }\n }\n\n private updateCurrentDate() {\n this.currentRangeValue = {\n id: this.selectedDateRangeId,\n from: this.from,\n to: this.to,\n };\n }\n\n private onDateSelect(\n rangeValue: { from: string; to: string; id: string },\n preserveDropdown = true\n ) {\n this.dateRangeChange.emit(rangeValue);\n\n if (preserveDropdown) {\n this.closeDropdown();\n }\n\n this.datePickerTouched = false;\n }\n\n private onRangeListSelect(id: string) {\n if (this.setDateRangeSelection(id)) {\n this.onDateSelect(this.currentRangeValue);\n }\n }\n\n private setDateRangeSelection(id: string) {\n this.selectedDateRangeId = id;\n const option = this.dateRangeOptions.find((range) => range.id === id);\n\n if (option) {\n this.currentRangeValue = option;\n }\n\n return option;\n }\n\n private closeDropdown() {\n this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n }\n\n private getButtonLabel() {\n if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n let range = this.currentRangeValue.from;\n\n if (this.currentRangeValue.to) {\n range += ` - ${this.currentRangeValue.to}`;\n }\n\n return range;\n }\n\n if (!this.selectedDateRangeId) {\n return this.i18nNoRange;\n }\n\n if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n return this.i18nNoRange;\n }\n\n const option = this.dateRangeOptions.find(\n (option) => option.id === this.selectedDateRangeId\n );\n\n if (!option) {\n console.error(\n `Cannot find range option with id ${this.selectedDateRangeId}`\n );\n return this.i18nNoRange;\n }\n\n return option.label;\n }\n\n render() {\n return (\n <Host>\n <ix-button\n data-date-dropdown-trigger\n variant=\"primary\"\n icon=\"history\"\n ref={(ref) => (this.triggerRef = ref)}\n >\n {this.getButtonLabel()}\n </ix-button>\n <ix-dropdown\n data-date-dropdown\n class=\"min-width max-height\"\n trigger={this.triggerRef}\n close-behavior=\"outside\"\n placement=\"bottom-start\"\n onShowChanged={({ detail: show }) => {\n if (\n !show &&\n this.selectedDateRangeId === 'custom' &&\n this.datePickerTouched\n ) {\n this.onDateSelect(this.currentRangeValue);\n }\n }}\n >\n <ix-layout-grid no-margin=\"true\">\n <ix-row>\n {this.dateRangeOptions?.length > 1 && (\n <ix-col\n class={{\n 'no-margin': true,\n 'border-right': this.selectedDateRangeId === 'custom',\n }}\n >\n {this.dateRangeOptions.map((dateRangeOption) => (\n <ix-dropdown-item\n label={dateRangeOption.label}\n onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n checked={this.selectedDateRangeId === dateRangeOption.id}\n ></ix-dropdown-item>\n ))}\n <div hidden={!this.customRangeAllowed}>\n <ix-dropdown-item\n label={this.i18nCustomItem}\n checked={this.selectedDateRangeId === 'custom'}\n onClick={() => this.onRangeListSelect('custom')}\n ></ix-dropdown-item>\n </div>\n </ix-col>\n )}\n <ix-col class=\"no-margin\">\n {this.selectedDateRangeId === 'custom' && (\n <Fragment>\n <ix-date-picker\n standaloneAppearance={false}\n onDateChange={(e) => {\n e.stopPropagation();\n this.currentRangeValue = {\n ...e.detail,\n id: 'custom',\n };\n this.datePickerTouched = true;\n }}\n onDateRangeChange={(e) => e.stopPropagation()}\n format={this.format}\n range={this.range}\n from={this.from || this.currentRangeValue?.from}\n to={this.to || this.currentRangeValue?.to}\n minDate={this.minDate}\n maxDate={this.maxDate}\n today={this.today}\n ></ix-date-picker>\n <div class=\"pull-right\">\n <ix-button\n onClick={() => {\n this.onDateSelect(this.currentRangeValue);\n }}\n >\n {this.i18nDone}\n </ix-button>\n </div>\n </Fragment>\n )}\n </ix-col>\n </ix-row>\n </ix-layout-grid>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-date-time-card.entry.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host } from './index-f18c5ad1.js';
+const dateTimeCardCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1);border-radius:4px}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 0.75rem 0.75rem 0.75rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";
+const IxDateTimeCardStyle0 = dateTimeCardCss;
+const DateTimeCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.standaloneAppearance = undefined;
+        this.individual = true;
+        this.corners = 'rounded';
+    }
+    cardClasses() {
+        return {
+            card: true,
+            standaloneAppearance: this.standaloneAppearance !== undefined
+                ? this.standaloneAppearance
+                : this.individual,
+            rounded: this.corners === 'rounded',
+            left: this.corners === 'left',
+            right: this.corners === 'right',
+        };
+    }
+    render() {
+        return (h(Host, { key: '40541d8514911fcfec7620c3542774eb189d1687' }, h("div", { key: 'd07d67a70360f31c67e3f220446e92f0266a5fbe', class: this.cardClasses() }, h("div", { key: '60681672b69bf55d3106eec4cf2a1d811c0cf637', class: "header" }, h("slot", { key: '5042ffc5ea4e264baa793dddd8fc071800f3eeaa', name: "header" })), h("div", { key: '68371c4b3fb5f66f291482dd44e738ba64813fb4', class: "separator" }), h("div", { key: 'a6dbde0e6f11d298bd78dfbaec884b1272e564c4', class: "content" }, h("slot", { key: '5537b6cca4feb31830e9d654785bc9c8258455ba' })))));
+    }
+};
+DateTimeCard.style = IxDateTimeCardStyle0;
+export { DateTimeCard as ix_date_time_card };
+//# sourceMappingURL=ix-date-time-card.entry.js.map

package/dist/esm/ix-date-time-card.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-date-time-card.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,60CAA60C,CAAC;AACt2C,6BAAe,eAAe;;MCoBjB,YAAY;;;oCAEQ,SAAS;0BAKV,IAAI;uBAKK,SAAS;;IAExC,WAAW;QACjB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,oBAAoB,EAClB,IAAI,CAAC,oBAAoB,KAAK,SAAS;kBACnC,IAAI,CAAC,oBAAoB;kBACzB,IAAI,CAAC,UAAU;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACnC,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAChC,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAC5B,4DAAK,KAAK,EAAC,QAAQ,IACjB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EAEN,4DAAK,KAAK,EAAC,WAAW,GAAO,EAE7B,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.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 {\n @include ix-component;\n\n .card {\n background-color: var(--theme-menu--background);\n width: 100%;\n box-shadow: none;\n border: none;\n border-radius: unset;\n display: flex;\n flex-direction: column;\n\n &.standaloneAppearance {\n box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n 0 12px 18px 0 rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n }\n\n &.rounded {\n border-radius: 4px;\n }\n\n &.left {\n border-radius: 4px 0 0 4px;\n height: 100%;\n }\n\n &.right {\n border-radius: 0 4px 4px 0;\n height: 100%;\n }\n\n .header {\n padding: $default-space;\n flex: 0 1 auto;\n }\n\n .separator {\n border: 1px solid var(--theme-datepicker-separator--background);\n width: 100%;\n flex: 0 1 auto;\n }\n\n .content {\n padding: 0 $medium-space $medium-space $medium-space;\n flex: 1 1 auto;\n display: flex;\n flex-direction: column;\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\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n tag: 'ix-date-time-card',\n styleUrl: 'date-time-card.scss',\n shadow: true,\n})\nexport class DateTimeCard {\n /** @internal */\n @Prop() standaloneAppearance = undefined;\n\n /**\n * set styles\n */\n @Prop() individual: boolean = true;\n\n /**\n * Set corners style\n */\n @Prop() corners: DateTimeCardCorners = 'rounded';\n\n private cardClasses() {\n return {\n card: true,\n standaloneAppearance:\n this.standaloneAppearance !== undefined\n ? this.standaloneAppearance\n : this.individual,\n rounded: this.corners === 'rounded',\n left: this.corners === 'left',\n right: this.corners === 'right',\n };\n }\n\n render() {\n return (\n <Host>\n <div class={this.cardClasses()}>\n <div class=\"header\">\n <slot name=\"header\"></slot>\n </div>\n\n <div class=\"separator\"></div>\n\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}