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

@siemens/ix 1.6.3 → 2.0.0-beta.1

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

Files changed (1549) hide show

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

@@ -283,7 +283,7 @@ export class DatePicker {
     };
   }
   render() {
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "Primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
         hidden: this.tempYear !== year,
         arrowPosition: true,
       }, name: "chevron-right", size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, class: {
@@ -292,12 +292,12 @@ export class DatePicker {
       }, onClick: () => this.selectMonth((index + 1)) }, h("ix-icon", { class: {
         hidden: this.tempMonth - 1 !== index,
         checkPosition: true,
-      }, name: "single-check", size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "Primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      }, name: "single-check", size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
       return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (h("div", { key: day, class: this.getDayClasses(day), onClick: () => this.selectDay(day) }, day)))));
-    })), h("div", { class: { button: true, hidden: !this.individual } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
+    })), h("div", { class: { button: true, hidden: !this.individual || !this.range } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
   }
   static get is() { return "ix-date-picker"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["date-picker.scss"]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { DateTime, Info, MonthNumbers } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type DateChangeEvent = {\n from: string;\n to: string;\n};\n\nexport type LegacyDateChangeEvent = DateChangeEvent \| string;\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\n@Component({\n tag: 'ix-date-picker',\n styleUrl: 'date-picker.scss',\n scoped: true,\n})\nexport class DatePicker {\n private daysInWeek = 7;\n private dayNames = Info.weekdays();\n private monthNames = Info.months();\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 range of dates can be selected.\n /\n @Prop() range: boolean = true;\n\n /\n @deprecated Will be removed in 2.0.0\n /\n @Prop() individual: boolean = true;\n\n /\n Corner style\n /\n @Prop() corners: DateTimeCardCorners = 'rounded';\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 @since 1.1.0\n /\n @Prop() from: string \| null = DateTime.now().toFormat(this.format);\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 @since 1.1.0\n /\n @Prop() to: string \| null = null;\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 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 /\n @Prop() eventDelimiter = ' - ';\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectDate = 'Done';\n\n @State() yearValue = this.year;\n @State() today = DateTime.now();\n @State() monthValue: number = this.month;\n @State() calendar: [number, number[]][] = [];\n\n @State() years = [...Array(10).keys()].map((year) => year + this.year - 5);\n @State() tempYear: number = this.yearValue;\n @State() tempMonth: number = this.monthValue;\n @State() start: DateTime = DateTime.fromObject({\n year: this.year,\n month: this.month,\n day: this.day,\n });\n\n @State() end: DateTime = this.to\n ? DateTime.fromFormat(this.to, this.format)\n : null;\n\n @State() dropdownButtonRef: HTMLElement;\n @State() yearContainerRef: HTMLElement;\n\n /\n Date change event\n \n If datepicker is in range mode the event detail will be sperated with a `-` e.g.\n * `2022/10/22 - 2022/10/24` (start and end). If range mode is chosen consider to use `dateRangeChange`.\n \n @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string\n /\n @Event() dateChange: EventEmitter<LegacyDateChangeEvent>;\n\n /\n Date range change.\n * Only triggered if datepicker is in range mode\n \n @since 1.1.0\n /\n @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n /\n Date selection confirmed via button action\n \n @deprecated Will be removed in 2.0.0. Use `dateSelect`\n /\n @Event() done: EventEmitter<string>;\n\n /\n Date selection confirmed via button action\n \n @since 1.1.0\n /\n @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n get year() {\n if (this.from !== null) {\n return DateTime.fromFormat(this.from, this.format).year;\n }\n\n return DateTime.now().year;\n }\n\n get day() {\n if (this.from !== null) {\n return DateTime.fromFormat(this.from, this.format).day;\n }\n\n return null;\n }\n\n get month() {\n if (this.from !== null) {\n return DateTime.fromFormat(this.from, this.format).month;\n }\n\n return DateTime.now().month;\n }\n\n private onDone() {\n this.done.emit(this.getOutputFormat());\n\n this.dateSelect.emit({\n from: this.start?.toFormat(this.format),\n to: this.end?.toFormat(this.format),\n });\n }\n\n private onDateChange() {\n const from = this.start?.toFormat(this.format);\n const to = this.end?.toFormat(this.format);\n\n this.from = from;\n this.to = to;\n\n if (this.eventDelimiter) {\n this.dateChange.emit(this.getOutputFormat());\n } else {\n this.dateChange.emit({\n from,\n to,\n });\n }\n\n if (this.range) {\n this.dateRangeChange.emit({\n from,\n to,\n });\n }\n }\n\n private getStartOfMonth(\n year = DateTime.local().get('year'),\n month = DateTime.local().get('month')\n ) {\n return DateTime.local(year, month).startOf('month');\n }\n\n private getEndOfMonth(\n year = DateTime.local().get('year'),\n month = DateTime.local().get('month')\n ) {\n return DateTime.local(year, month).endOf('month');\n }\n\n private getDaysInMonth(\n start = this.getStartOfMonth(),\n end = this.getEndOfMonth()\n ) {\n return Math.ceil(end.diff(start, 'days').days);\n }\n\n private calculateCalendar() {\n const start = this.getStartOfMonth(this.yearValue, this.monthValue);\n const end = this.getEndOfMonth(this.yearValue, this.monthValue);\n const totalDays = this.getDaysInMonth(start, end);\n const totalWeeks = 6;\n const totalDaysInWeeks = totalWeeks this.daysInWeek;\n const startWeekDay = start.weekday;\n const prependDays = startWeekDay - 1;\n const appendDays = totalDaysInWeeks - totalDays - prependDays;\n let weekdays: number[][] = [];\n const calendar: [number, number[]][] = [];\n\n // create list of days\n let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);\n\n // add start empty days\n days.unshift(...new Array(prependDays));\n\n // remove & add end days\n days = days.slice(0, days.length - prependDays - appendDays);\n days.push(...new Array(appendDays));\n\n // make weeks\n weekdays = days.reduce((result, item, index) => {\n const weekIndex = Math.floor(index / this.daysInWeek);\n\n if (!result[weekIndex]) result[weekIndex] = [];\n\n result[weekIndex].push(item);\n\n return result;\n }, []);\n\n for (let index = 1; index <= totalWeeks; index++) {\n const week = weekdays[index - 1];\n const firstWeekDay = week.find((day) => day !== undefined);\n const weekNumber = firstWeekDay\n ? DateTime.local(\n this.yearValue,\n this.monthValue,\n weekdays[index - 1][0]\n ).weekNumber\n : undefined;\n calendar.push([weekNumber, week]);\n }\n\n this.calendar = calendar;\n }\n\n private changeMonth(number) {\n if (this.monthValue + number < 1) {\n this.yearValue--;\n this.monthValue = 12;\n } else if (this.monthValue + number > 12) {\n this.yearValue++;\n this.monthValue = 1;\n } else {\n this.monthValue += number;\n }\n this.calculateCalendar();\n }\n\n private selectMonth(month: MonthNumbers) {\n this.monthValue = month;\n this.yearValue = this.tempYear;\n this.tempMonth = month;\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 scroll + this.yearContainerRef.getBoundingClientRect().height ===\n maxScroll;\n const limit = 200;\n\n if (this.years.length > limit) return;\n\n if (atTop) {\n this.years = [\n ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),\n ...this.years,\n ];\n this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });\n }\n\n if (atBottom) {\n this.years = [\n ...this.years,\n ...[...Array(5).keys()].map(\n (year) => year + this.years[this.years.length - 1]\n ),\n ];\n this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });\n }\n }\n\n private selectTempYear(event: MouseEvent, year: number) {\n event.stopPropagation();\n this.tempYear = year;\n }\n\n private getDayClasses(day: number) {\n if (!day) {\n return;\n }\n\n const todayLocal = DateTime.local();\n const dayLocal = DateTime.local(this.yearValue, this.monthValue, day);\n const dayIso = dayLocal.toISO();\n const startIso = this.start?.toISO();\n const endIso = this.end?.toISO();\n const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;\n\n return {\n 'calendar-item': true,\n 'empty-day': day === undefined,\n today: isToday,\n selected:\n (this.start && dayIso === startIso) \|\| (this.end && dayIso === endIso),\n range: this.start && this.end && dayIso > startIso && dayIso < endIso,\n disabled: !this.isWithinMinMax(dayLocal),\n };\n }\n\n private selectDay(day: number) {\n const date = DateTime.local(this.yearValue, this.monthValue, day);\n const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();\n const isSameDay =\n this.start && !this.end && this.start.toISO() === date.toISO();\n\n if (day === undefined) return;\n\n if (isSameDay) {\n this.start = null;\n this.onDateChange();\n return;\n }\n\n if (this.range) {\n if (this.start === null) {\n this.start = date;\n } else if (this.end === null) {\n if (isStartBeforeEnd) {\n this.end = date;\n } else {\n this.end = this.start;\n this.start = date;\n }\n } else {\n this.start = date;\n this.end = null;\n }\n } else {\n this.start = date;\n }\n\n this.onDateChange();\n }\n\n private getOutputFormat() {\n if (!this.start) {\n return null;\n }\n\n if (!this.end) {\n return this.start.toFormat(this.format);\n }\n\n return [\n this.start.toFormat(this.format),\n this.end.toFormat(this.format),\n ].join(this.eventDelimiter);\n }\n\n private isWithinMinMax(date: DateTime) {\n const dateIso = date.toISO();\n const _minDate = this.minDate\n ? DateTime.fromFormat(this.minDate, this.format)\n : null;\n const _maxDate = this.maxDate\n ? DateTime.fromFormat(this.maxDate, this.format)\n : null;\n return (\n (!_minDate \|\| _minDate.toISO() <= dateIso) &&\n (!_maxDate \|\| _maxDate.toISO() >= dateIso)\n );\n }\n\n componentWillLoad() {\n if (this.from === null) {\n this.start = null;\n }\n\n if (this.year !== null) {\n this.yearValue = this.year;\n }\n if (this.month) {\n this.monthValue = this.month;\n }\n }\n\n componentWillRender() {\n this.calculateCalendar();\n }\n\n /*\n Get the current DateTime\n */\n @Method()\n async getCurrentDate() {\n return {\n start: this.start?.toFormat(this.format),\n end: this.end?.toFormat(this.format),\n };\n }\n\n render() {\n return (\n <Host>\n <ix-date-time-card individual={this.individual} corners={this.corners}>\n <div class=\"header\" slot=\"header\">\n <ix-icon-button\n onClick={() => this.changeMonth(-1)}\n ghost\n icon=\"chevron-left\"\n variant=\"Primary\"\n class=\"arrows\"\n ></ix-icon-button>\n\n <div class=\"selector\">\n <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n <span class=\"fontSize capitalize\">\n {this.monthNames[this.monthValue - 1]} {this.yearValue}\n </span>\n </ix-button>\n <ix-dropdown\n class=\"dropdown\"\n trigger={this.dropdownButtonRef}\n placement=\"bottom\"\n >\n <div class=\"wrapper\">\n <div\n class=\"overflow\"\n onScroll={() => this.infiniteScrollYears()}\n ref={(ref) => (this.yearContainerRef = ref)}\n >\n {this.years.map((year) => (\n <div\n key={year}\n class={{ arrowYear: true }}\n onClick={(event) => this.selectTempYear(event, year)}\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\n style={{ 'min-width': 'max-content' }}\n >{`${year}`}</div>\n </div>\n ))}\n </div>\n <div class=\"overflow\">\n {this.monthNames.map((month, index) => (\n <div\n key={month}\n class={{\n arrowYear: true,\n selected: this.tempMonth - 1 === index,\n }}\n onClick={() =>\n this.selectMonth((index + 1) as MonthNumbers)\n }\n >\n <ix-icon\n class={{\n hidden: this.tempMonth - 1 !== index,\n checkPosition: true,\n }}\n name=\"single-check\"\n size=\"16\"\n ></ix-icon>\n <div>\n <span\n class={{ capitalize: true, monthMargin: true }}\n >{`${month} ${this.tempYear}`}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n </ix-dropdown>\n </div>\n\n <ix-icon-button\n onClick={() => this.changeMonth(1)}\n ghost\n icon=\"chevron-right\"\n variant=\"Primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n\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\n {this.calendar.map((week) => {\n return (\n <Fragment>\n <div class=\"calendar-item week-number\">{week[0]}</div>\n {week[1].map((day) => (\n <div\n key={day}\n class={this.getDayClasses(day)}\n onClick={() => this.selectDay(day)}\n >\n {day}\n </div>\n ))}\n </Fragment>\n );\n })}\n </div>\n\n <div class={{ button: true, hidden: !this.individual }}>\n <ix-button onClick={() => this.onDone()}>\n {this.textSelectDate}\n </ix-button>\n </div>\n </ix-date-time-card>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { DateTime, Info, MonthNumbers } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type DateChangeEvent = {\n from: string;\n to: string;\n};\n\nexport type LegacyDateChangeEvent = DateChangeEvent \| string;\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\n@Component({\n tag: 'ix-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\nexport class DatePicker {\n private daysInWeek = 7;\n private dayNames = Info.weekdays();\n private monthNames = Info.months();\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 range of dates can be selected.\n /\n @Prop() range: boolean = true;\n\n /\n @deprecated Will be removed in 2.0.0\n /\n @Prop() individual: boolean = true;\n\n /\n Corner style\n /\n @Prop() corners: DateTimeCardCorners = 'rounded';\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 @since 1.1.0\n /\n @Prop() from: string \| null = DateTime.now().toFormat(this.format);\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 @since 1.1.0\n /\n @Prop() to: string \| null = null;\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 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 /\n @Prop() eventDelimiter = ' - ';\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectDate = 'Done';\n\n @State() yearValue = this.year;\n @State() today = DateTime.now();\n @State() monthValue: number = this.month;\n @State() calendar: [number, number[]][] = [];\n\n @State() years = [...Array(10).keys()].map((year) => year + this.year - 5);\n @State() tempYear: number = this.yearValue;\n @State() tempMonth: number = this.monthValue;\n @State() start: DateTime = DateTime.fromObject({\n year: this.year,\n month: this.month,\n day: this.day,\n });\n\n @State() end: DateTime = this.to\n ? DateTime.fromFormat(this.to, this.format)\n : null;\n\n @State() dropdownButtonRef: HTMLElement;\n @State() yearContainerRef: HTMLElement;\n\n /\n Date change event\n \n If datepicker is in range mode the event detail will be sperated with a `-` e.g.\n * `2022/10/22 - 2022/10/24` (start and end). If range mode is chosen consider to use `dateRangeChange`.\n \n @deprecated String output will be removed. Set ´doneEventDelimiter´ to undefined or null to get date change object instead of a string\n /\n @Event() dateChange: EventEmitter<LegacyDateChangeEvent>;\n\n /\n Date range change.\n * Only triggered if datepicker is in range mode\n \n @since 1.1.0\n /\n @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n /\n Date selection confirmed via button action\n \n @deprecated Will be removed in 2.0.0. Use `dateSelect`\n /\n @Event() done: EventEmitter<string>;\n\n /\n Date selection confirmed via button action\n \n @since 1.1.0\n /\n @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n get year() {\n if (this.from !== null) {\n return DateTime.fromFormat(this.from, this.format).year;\n }\n\n return DateTime.now().year;\n }\n\n get day() {\n if (this.from !== null) {\n return DateTime.fromFormat(this.from, this.format).day;\n }\n\n return null;\n }\n\n get month() {\n if (this.from !== null) {\n return DateTime.fromFormat(this.from, this.format).month;\n }\n\n return DateTime.now().month;\n }\n\n private onDone() {\n this.done.emit(this.getOutputFormat());\n\n this.dateSelect.emit({\n from: this.start?.toFormat(this.format),\n to: this.end?.toFormat(this.format),\n });\n }\n\n private onDateChange() {\n const from = this.start?.toFormat(this.format);\n const to = this.end?.toFormat(this.format);\n\n this.from = from;\n this.to = to;\n\n if (this.eventDelimiter) {\n this.dateChange.emit(this.getOutputFormat());\n } else {\n this.dateChange.emit({\n from,\n to,\n });\n }\n\n if (this.range) {\n this.dateRangeChange.emit({\n from,\n to,\n });\n }\n }\n\n private getStartOfMonth(\n year = DateTime.local().get('year'),\n month = DateTime.local().get('month')\n ) {\n return DateTime.local(year, month).startOf('month');\n }\n\n private getEndOfMonth(\n year = DateTime.local().get('year'),\n month = DateTime.local().get('month')\n ) {\n return DateTime.local(year, month).endOf('month');\n }\n\n private getDaysInMonth(\n start = this.getStartOfMonth(),\n end = this.getEndOfMonth()\n ) {\n return Math.ceil(end.diff(start, 'days').days);\n }\n\n private calculateCalendar() {\n const start = this.getStartOfMonth(this.yearValue, this.monthValue);\n const end = this.getEndOfMonth(this.yearValue, this.monthValue);\n const totalDays = this.getDaysInMonth(start, end);\n const totalWeeks = 6;\n const totalDaysInWeeks = totalWeeks this.daysInWeek;\n const startWeekDay = start.weekday;\n const prependDays = startWeekDay - 1;\n const appendDays = totalDaysInWeeks - totalDays - prependDays;\n let weekdays: number[][] = [];\n const calendar: [number, number[]][] = [];\n\n // create list of days\n let days = [...new Array(totalDaysInWeeks).keys()].map((day) => day + 1);\n\n // add start empty days\n days.unshift(...new Array(prependDays));\n\n // remove & add end days\n days = days.slice(0, days.length - prependDays - appendDays);\n days.push(...new Array(appendDays));\n\n // make weeks\n weekdays = days.reduce((result, item, index) => {\n const weekIndex = Math.floor(index / this.daysInWeek);\n\n if (!result[weekIndex]) result[weekIndex] = [];\n\n result[weekIndex].push(item);\n\n return result;\n }, []);\n\n for (let index = 1; index <= totalWeeks; index++) {\n const week = weekdays[index - 1];\n const firstWeekDay = week.find((day) => day !== undefined);\n const weekNumber = firstWeekDay\n ? DateTime.local(\n this.yearValue,\n this.monthValue,\n weekdays[index - 1][0]\n ).weekNumber\n : undefined;\n calendar.push([weekNumber, week]);\n }\n\n this.calendar = calendar;\n }\n\n private changeMonth(number) {\n if (this.monthValue + number < 1) {\n this.yearValue--;\n this.monthValue = 12;\n } else if (this.monthValue + number > 12) {\n this.yearValue++;\n this.monthValue = 1;\n } else {\n this.monthValue += number;\n }\n this.calculateCalendar();\n }\n\n private selectMonth(month: MonthNumbers) {\n this.monthValue = month;\n this.yearValue = this.tempYear;\n this.tempMonth = month;\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 scroll + this.yearContainerRef.getBoundingClientRect().height ===\n maxScroll;\n const limit = 200;\n\n if (this.years.length > limit) return;\n\n if (atTop) {\n this.years = [\n ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),\n ...this.years,\n ];\n this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });\n }\n\n if (atBottom) {\n this.years = [\n ...this.years,\n ...[...Array(5).keys()].map(\n (year) => year + this.years[this.years.length - 1]\n ),\n ];\n this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });\n }\n }\n\n private selectTempYear(event: MouseEvent, year: number) {\n event.stopPropagation();\n this.tempYear = year;\n }\n\n private getDayClasses(day: number) {\n if (!day) {\n return;\n }\n\n const todayLocal = DateTime.local();\n const dayLocal = DateTime.local(this.yearValue, this.monthValue, day);\n const dayIso = dayLocal.toISO();\n const startIso = this.start?.toISO();\n const endIso = this.end?.toISO();\n const isToday = Math.ceil(dayLocal.diff(todayLocal, 'days').days) === 0;\n\n return {\n 'calendar-item': true,\n 'empty-day': day === undefined,\n today: isToday,\n selected:\n (this.start && dayIso === startIso) \|\| (this.end && dayIso === endIso),\n range: this.start && this.end && dayIso > startIso && dayIso < endIso,\n disabled: !this.isWithinMinMax(dayLocal),\n };\n }\n\n private selectDay(day: number) {\n const date = DateTime.local(this.yearValue, this.monthValue, day);\n const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();\n const isSameDay =\n this.start && !this.end && this.start.toISO() === date.toISO();\n\n if (day === undefined) return;\n\n if (isSameDay) {\n this.start = null;\n this.onDateChange();\n return;\n }\n\n if (this.range) {\n if (this.start === null) {\n this.start = date;\n } else if (this.end === null) {\n if (isStartBeforeEnd) {\n this.end = date;\n } else {\n this.end = this.start;\n this.start = date;\n }\n } else {\n this.start = date;\n this.end = null;\n }\n } else {\n this.start = date;\n }\n\n this.onDateChange();\n }\n\n private getOutputFormat() {\n if (!this.start) {\n return null;\n }\n\n if (!this.end) {\n return this.start.toFormat(this.format);\n }\n\n return [\n this.start.toFormat(this.format),\n this.end.toFormat(this.format),\n ].join(this.eventDelimiter);\n }\n\n private isWithinMinMax(date: DateTime) {\n const dateIso = date.toISO();\n const _minDate = this.minDate\n ? DateTime.fromFormat(this.minDate, this.format)\n : null;\n const _maxDate = this.maxDate\n ? DateTime.fromFormat(this.maxDate, this.format)\n : null;\n return (\n (!_minDate \|\| _minDate.toISO() <= dateIso) &&\n (!_maxDate \|\| _maxDate.toISO() >= dateIso)\n );\n }\n\n componentWillLoad() {\n if (this.from === null) {\n this.start = null;\n }\n\n if (this.year !== null) {\n this.yearValue = this.year;\n }\n if (this.month) {\n this.monthValue = this.month;\n }\n }\n\n componentWillRender() {\n this.calculateCalendar();\n }\n\n /*\n Get the current DateTime\n */\n @Method()\n async getCurrentDate() {\n return {\n start: this.start?.toFormat(this.format),\n end: this.end?.toFormat(this.format),\n };\n }\n\n render() {\n return (\n <Host>\n <ix-date-time-card individual={this.individual} corners={this.corners}>\n <div class=\"header\" slot=\"header\">\n <ix-icon-button\n onClick={() => this.changeMonth(-1)}\n ghost\n icon=\"chevron-left\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n\n <div class=\"selector\">\n <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n <span class=\"fontSize capitalize\">\n {this.monthNames[this.monthValue - 1]} {this.yearValue}\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.years.map((year) => (\n <div\n key={year}\n class={{ arrowYear: true }}\n onClick={(event) => this.selectTempYear(event, year)}\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\n style={{ 'min-width': 'max-content' }}\n >{`${year}`}</div>\n </div>\n ))}\n </div>\n <div class=\"overflow\">\n {this.monthNames.map((month, index) => (\n <div\n key={month}\n class={{\n arrowYear: true,\n selected: this.tempMonth - 1 === index,\n }}\n onClick={() =>\n this.selectMonth((index + 1) as MonthNumbers)\n }\n >\n <ix-icon\n class={{\n hidden: this.tempMonth - 1 !== index,\n checkPosition: true,\n }}\n name=\"single-check\"\n size=\"16\"\n ></ix-icon>\n <div>\n <span\n class={{ capitalize: true, monthMargin: true }}\n >{`${month} ${this.tempYear}`}</span>\n </div>\n </div>\n ))}\n </div>\n </div>\n </ix-dropdown>\n </div>\n\n <ix-icon-button\n onClick={() => this.changeMonth(1)}\n ghost\n icon=\"chevron-right\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n\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\n {this.calendar.map((week) => {\n return (\n <Fragment>\n <div class=\"calendar-item week-number\">{week[0]}</div>\n {week[1].map((day) => (\n <div\n key={day}\n class={this.getDayClasses(day)}\n onClick={() => this.selectDay(day)}\n >\n {day}\n </div>\n ))}\n </Fragment>\n );\n })}\n </div>\n\n <div\n class={{ button: true, hidden: !this.individual \|\| !this.range }}\n >\n <ix-button onClick={() => this.onDone()}>\n {this.textSelectDate}\n </ix-button>\n </div>\n </ix-date-time-card>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/date-time-card/date-time-card.css CHANGED Viewed

@@ -18,34 +18,92 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
-.card {
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+: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;
 }
-.card.individual {
+:host .card.individual {
   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 0px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--theme-menu--border-color);
   border-radius: 4px;
 }
-.card.left {
+:host .card.left {
   border-radius: 4px 0 0 4px;
   height: 100%;
 }
-.card.right {
+:host .card.right {
   border-radius: 0 4px 4px 0;
   height: 100%;
 }
-.card .header {
+:host .card .header {
   padding: 1rem;
+  flex: 0 1 auto;
 }
-.card .separator {
+:host .card .separator {
   border: 1px solid var(--theme-datepicker-separator--background);
   width: 100%;
+  flex: 0 1 auto;
 }
-.card .content {
-  height: 100%;
+:host .card .content {
   padding: 0px 1rem 1rem 1rem;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }

package/dist/collection/components/date-time-card/date-time-card.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class DateTimeCard {
     return (h(Host, null, h("div", { class: this.cardClasses() }, h("div", { class: "header" }, h("slot", { name: "header" })), h("div", { class: "separator" }), h("div", { class: "content" }, h("slot", null)))));
   }
   static get is() { return "ix-date-time-card"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["date-time-card.scss"]
@@ -83,6 +83,5 @@ export class DateTimeCard {
       }
     };
   }
-  static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=date-time-card.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-time-card.js","sourceRoot":"","sources":["../../../src/components/date-time-card/date-time-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,~~OAAO,EAAE,~~CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAIlE~~;;GAEG;AAMH,MAAM,OAAO,YAAY;;~~sBAMO~~,IAAI;mBAKK,SAAS;;EAExC,WAAW;IACjB,OAAO;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;MAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;KAChC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;QAC5B,WAAK,KAAK,EAAC,QAAQ;UACjB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QAEN,WAAK,KAAK,EAAC,WAAW,GAAO;QAE7B,WAAK,KAAK,EAAC,SAAS;UAClB,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, ~~Element,~~ h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' \| 'left' \| 'right';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-date-time-card',\n styleUrl: 'date-time-card.scss',\n ~~scoped~~: true,\n})\nexport class DateTimeCard {\n ~~@Element() hostElement: HTMLIxDateTimeCardElement;\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 individual: this.individual,\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"]}
1	+ {"version":3,"file":"date-time-card.js","sourceRoot":"","sources":["../../../src/components/date-time-card/date-time-card.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;sBAIO,IAAI;mBAKK,SAAS;;EAExC,WAAW;IACjB,OAAO;MACL,IAAI,EAAE,IAAI;MACV,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;MAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;KAChC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;QAC5B,WAAK,KAAK,EAAC,QAAQ;UACjB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QAEN,WAAK,KAAK,EAAC,WAAW,GAAO;QAE7B,WAAK,KAAK,EAAC,SAAS;UAClB,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' \| 'left' \| 'right';\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 /\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 individual: this.individual,\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"]}

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

@@ -18,26 +18,72 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   background-color: var(--theme-menu--background);
   border-radius: 4px;
   position: relative;
   width: 32.6875rem;
 }
-.flex {
+: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 .flex {
   display: flex;
   justify-content: center;
 }
-.btn-select-date {
+:host .btn-select-date {
   position: absolute;
   bottom: 1rem;
   right: 1rem;
 }
-.separator {
+:host .separator {
   border: 1px solid var(--theme-datepicker-separator--background);
   width: 100%;
   margin-top: 72px;

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

@@ -60,7 +60,7 @@ export class DateTimePicker {
     return (h(Host, null, h("div", { class: "flex" }, h("div", { class: "separator" }), h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }), h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }), h("div", { class: "separator" })), h("ix-button", { class: "btn-select-date", onClick: () => this.onDone() }, this.textSelectDate)));
   }
   static get is() { return "ix-datetime-picker"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["datetime-picker.scss"]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datetime-picker.js","sourceRoot":"","sources":["../../../src/components/datetime-picker/datetime-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { DateChangeEvent } from '~~src~~/~~components~~';\n\nexport type DateTimeSelectEvent = {\n from: string;\n to: string;\n time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n \| string\n \| Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n tag: 'ix-datetime-picker',\n styleUrl: 'datetime-picker.scss',\n ~~scoped~~: true,\n})\nexport class DateTimePicker {\n /\n Set range size\n /\n @Prop() range = true;\n\n /\n Show hour input\n /\n @Prop() showHour = false;\n\n /\n Show minutes input\n /\n @Prop() showMinutes = false;\n\n /\n Show seconds input\n /\n @Prop() showSeconds = false;\n\n /\n 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 Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n /\n Time format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() timeFormat: string = 'TT';\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n \n Format is based on `format`\n \n @since 1.1.0\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 @since 1.1.0\n /\n @Prop() to: string \| null = null;\n\n /\n Select time with format string\n \n @since 1.1.0\n /\n @Prop() time: string;\n\n /\n Show time reference input\n * Time reference is default aligned with @see {this.timeFormat}\n \n @since 1.1.0\n /\n @Prop() showTimeReference = undefined;\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 /\n @Prop() eventDelimiter = ' - ';\n\n /\n Set time reference\n /\n @Prop() timeReference: 'AM' \| 'PM';\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectDate = 'Done';\n\n /\n Done event\n \n Set `doneEventDelimiter` to null or undefine to get the typed event\n /\n @Event() done: EventEmitter<string>;\n\n /\n Time change\n \n @since 1.1.0\n /\n @Event() timeChange: EventEmitter<string>;\n\n /\n Date change\n \n @since 1.1.0\n /\n @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n /\n Date selection event is fired after confirm button is pressend\n \n @since 1.1.0\n */\n @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n private datePickerElement: HTMLIxDatePickerElement;\n private timePickerElement: HTMLIxTimePickerElement;\n\n private _from: string;\n private _to: string;\n private _time: string;\n\n private onDone() {\n this.done.emit(\n [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n );\n\n this.dateSelect.emit({\n from: this._from,\n to: this._to,\n time: this._time,\n });\n }\n\n private async onDateChange(event: CustomEvent<string \| DateChangeEvent>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: date } = event;\n this.dateChange.emit(date);\n\n const currentDateTime = await this.datePickerElement.getCurrentDate();\n this._from = currentDateTime.start;\n this._to = currentDateTime.end;\n }\n\n private async onTimeChange(event: CustomEvent<string>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: time } = event;\n this.timeChange.emit(time);\n\n const currentDateTime = await this.timePickerElement.getCurrentTime();\n this._time = currentDateTime;\n }\n\n componentDidLoad() {\n this._from = this.from;\n this._to = this.to;\n this._time = this.time;\n }\n\n render() {\n return (\n <Host>\n <div class=\"flex\">\n <div class=\"separator\"></div>\n <ix-date-picker\n ref={(ref) => (this.datePickerElement = ref)}\n corners=\"left\"\n individual={false}\n range={this.range}\n onDateChange={(event) => this.onDateChange(event)}\n from={this.from}\n to={this.to}\n format={this.dateFormat}\n minDate={this.minDate}\n maxDate={this.maxDate}\n eventDelimiter={this.eventDelimiter}\n ></ix-date-picker>\n\n <ix-time-picker\n ref={(ref) => (this.timePickerElement = ref)}\n corners=\"right\"\n individual={false}\n showHour={this.showHour}\n showMinutes={this.showMinutes}\n showSeconds={this.showSeconds}\n showTimeReference={this.showTimeReference}\n onTimeChange={(event) => this.onTimeChange(event)}\n time={this.time}\n format={this.timeFormat}\n timeReference={this.timeReference}\n ></ix-time-picker>\n <div class=\"separator\"></div>\n </div>\n\n <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n {this.textSelectDate}\n </ix-button>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"datetime-picker.js","sourceRoot":"","sources":["../../../src/components/datetime-picker/datetime-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\n\nexport type DateTimeSelectEvent = {\n from: string;\n to: string;\n time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n \| string\n \| Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n tag: 'ix-datetime-picker',\n styleUrl: 'datetime-picker.scss',\n shadow: true,\n})\nexport class DateTimePicker {\n /\n Set range size\n /\n @Prop() range = true;\n\n /\n Show hour input\n /\n @Prop() showHour = false;\n\n /\n Show minutes input\n /\n @Prop() showMinutes = false;\n\n /\n Show seconds input\n /\n @Prop() showSeconds = false;\n\n /\n 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 Date format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n /\n Time format string.\n * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n \n @since 1.1.0\n /\n @Prop() timeFormat: string = 'TT';\n\n /\n Picker date. If the picker is in range mode this property is the start date.\n \n Format is based on `format`\n \n @since 1.1.0\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 @since 1.1.0\n /\n @Prop() to: string \| null = null;\n\n /\n Select time with format string\n \n @since 1.1.0\n /\n @Prop() time: string;\n\n /\n Show time reference input\n * Time reference is default aligned with @see {this.timeFormat}\n \n @since 1.1.0\n /\n @Prop() showTimeReference = undefined;\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 /\n @Prop() eventDelimiter = ' - ';\n\n /\n Set time reference\n /\n @Prop() timeReference: 'AM' \| 'PM';\n\n /\n Text of date select button\n \n @since 1.1.0\n /\n @Prop() textSelectDate = 'Done';\n\n /\n Done event\n \n Set `doneEventDelimiter` to null or undefine to get the typed event\n /\n @Event() done: EventEmitter<string>;\n\n /\n Time change\n \n @since 1.1.0\n /\n @Event() timeChange: EventEmitter<string>;\n\n /\n Date change\n \n @since 1.1.0\n /\n @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n /\n Date selection event is fired after confirm button is pressend\n \n @since 1.1.0\n */\n @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n private datePickerElement: HTMLIxDatePickerElement;\n private timePickerElement: HTMLIxTimePickerElement;\n\n private _from: string;\n private _to: string;\n private _time: string;\n\n private onDone() {\n this.done.emit(\n [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n );\n\n this.dateSelect.emit({\n from: this._from,\n to: this._to,\n time: this._time,\n });\n }\n\n private async onDateChange(event: CustomEvent<string \| DateChangeEvent>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: date } = event;\n this.dateChange.emit(date);\n\n const currentDateTime = await this.datePickerElement.getCurrentDate();\n this._from = currentDateTime.start;\n this._to = currentDateTime.end;\n }\n\n private async onTimeChange(event: CustomEvent<string>) {\n event.preventDefault();\n event.stopPropagation();\n const { detail: time } = event;\n this.timeChange.emit(time);\n\n const currentDateTime = await this.timePickerElement.getCurrentTime();\n this._time = currentDateTime;\n }\n\n componentDidLoad() {\n this._from = this.from;\n this._to = this.to;\n this._time = this.time;\n }\n\n render() {\n return (\n <Host>\n <div class=\"flex\">\n <div class=\"separator\"></div>\n <ix-date-picker\n ref={(ref) => (this.datePickerElement = ref)}\n corners=\"left\"\n individual={false}\n range={this.range}\n onDateChange={(event) => this.onDateChange(event)}\n from={this.from}\n to={this.to}\n format={this.dateFormat}\n minDate={this.minDate}\n maxDate={this.maxDate}\n eventDelimiter={this.eventDelimiter}\n ></ix-date-picker>\n\n <ix-time-picker\n ref={(ref) => (this.timePickerElement = ref)}\n corners=\"right\"\n individual={false}\n showHour={this.showHour}\n showMinutes={this.showMinutes}\n showSeconds={this.showSeconds}\n showTimeReference={this.showTimeReference}\n onTimeChange={(event) => this.onTimeChange(event)}\n time={this.time}\n format={this.timeFormat}\n timeReference={this.timeReference}\n ></ix-time-picker>\n <div class=\"separator\"></div>\n </div>\n\n <ix-button class=\"btn-select-date\" onClick={() => this.onDone()}>\n {this.textSelectDate}\n </ix-button>\n </Host>\n );\n }\n}\n"]}

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

@@ -30,11 +30,23 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /* Dimensions */
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   top: 0;
   right: 0;
   box-shadow: var(--theme-box-shadow-level-3);
@@ -55,6 +67,30 @@
 :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 .toggle {
   z-index: 100;
   visibility: visible;

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

@@ -82,6 +82,9 @@ export class Drawer {
       },
     });
   }
+  componentDidLoad() {
+    this.onShowChanged(this.show);
+  }
   render() {
     return (h(Host, { class: {
         'drawer-container': true,

package/dist/collection/components/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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~~AArHc~~,eAAQ,GAAG,GAAG,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n Fire event after drawer is open\n /\n @Event() open: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose: EventEmitter;\n\n private static duration = 300;\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @Watch('show')\n onShowChanged(newValue: boolean) {\n this.show = newValue !== undefined ? newValue : !this.show;\n this.toggleDrawer(this.show);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n this.show = show !== undefined ? show : !this.show;\n\n if (show) {\n this.open.emit();\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, 300);\n } else {\n this.drawerClose.emit();\n this.slideOutRight(this.divElement);\n window.removeEventListener('mousedown', this.callback);\n }\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.show = false;\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private slideOutRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: [0, '16rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: ['16rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n el.classList.remove('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n toggle: this.show,\n 'full-height': this.fullHeight,\n 'd-none': true,\n }}\n style={{\n width: this.width === 'auto' ? this.width : `${this.width}rem`,\n 'min-width': `${this.minWidth}rem`,\n 'max-width': `${this.maxWidth}rem`,\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n icon=\"close\"\n size=\"24\"\n ghost\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n ></ix-icon-button>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n Fire event after drawer is open\n /\n @Event() open: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose: EventEmitter;\n\n private static duration = 300;\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @Watch('show')\n onShowChanged(newValue: boolean) {\n this.show = newValue !== undefined ? newValue : !this.show;\n this.toggleDrawer(this.show);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n this.show = show !== undefined ? show : !this.show;\n\n if (show) {\n this.open.emit();\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, 300);\n } else {\n this.drawerClose.emit();\n this.slideOutRight(this.divElement);\n window.removeEventListener('mousedown', this.callback);\n }\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.show = false;\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private slideOutRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: [0, '16rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: ['16rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n el.classList.remove('d-none');\n },\n });\n }\n\n componentDidLoad() {\n this.onShowChanged(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n toggle: this.show,\n 'full-height': this.fullHeight,\n 'd-none': true,\n }}\n style={{\n width: this.width === 'auto' ? this.width : `${this.width}rem`,\n 'min-width': `${this.minWidth}rem`,\n 'max-width': `${this.maxWidth}rem`,\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n icon=\"close\"\n size=\"24\"\n ghost\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n ></ix-icon-button>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/drawer/test/drawer.ct.js ADDED Viewed

@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-drawer>Content</ix-drawer>`);
+  const drawer = page.locator('ix-drawer');
+  await expect(drawer).toHaveClass(/hydrated/);
+  await expect(drawer).not.toBeVisible();
+});
+test('show by property (initial)', async ({ mount, page }) => {
+  await mount(`<ix-drawer show>Content</ix-drawer>`);
+  const drawer = page.locator('ix-drawer');
+  await expect(drawer).toHaveClass(/hydrated/);
+  await expect(drawer).toBeVisible();
+});
+test('show by property', async ({ mount, page }) => {
+  await mount(`<ix-drawer show>Content</ix-drawer>`);
+  const drawer = page.locator('ix-drawer');
+  await drawer.evaluate((drawerElement) => (drawerElement.show = true));
+  await expect(drawer).toHaveClass(/hydrated/);
+  await expect(drawer).toBeVisible();
+});
+test('toggle by property', async ({ mount, page }) => {
+  await mount(`<ix-drawer show>Content</ix-drawer>`);
+  const drawer = page.locator('ix-drawer');
+  await drawer.evaluate((drawerElement) => (drawerElement.show = true));
+  await expect(drawer).toHaveClass(/hydrated/);
+  await expect(drawer).toBeVisible();
+  await drawer.evaluate((drawerElement) => (drawerElement.show = false));
+  await expect(drawer).not.toBeVisible();
+});
+//# sourceMappingURL=drawer.ct.js.map

package/dist/collection/components/drawer/test/drawer.ct.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"drawer.ct.js","sourceRoot":"","sources":["../../../../src/components/drawer/test/drawer.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;EAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AACzC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EAC3D,MAAM,KAAK,CAAC,qCAAqC,CAAC,CAAC;EACnD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACzC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;AACrC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACjD,MAAM,KAAK,CAAC,qCAAqC,CAAC,CAAC;EACnD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,QAAQ,CACnB,CAAC,aAAkC,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,CACpE,CAAC;EAEF,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;AACrC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACnD,MAAM,KAAK,CAAC,qCAAqC,CAAC,CAAC;EACnD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EAEzC,MAAM,MAAM,CAAC,QAAQ,CACnB,CAAC,aAAkC,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,GAAG,IAAI,CAAC,CACpE,CAAC;EAEF,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC7C,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;EAEnC,MAAM,MAAM,CAAC,QAAQ,CACnB,CAAC,aAAkC,EAAE,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,GAAG,KAAK,CAAC,CACrE,CAAC;EAEF,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;AACzC,CAAC,CAAC,CAAC","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 * 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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n await mount(`<ix-drawer>Content</ix-drawer>`);\n const drawer = page.locator('ix-drawer');\n await expect(drawer).toHaveClass(/hydrated/);\n await expect(drawer).not.toBeVisible();\n});\n\ntest('show by property (initial)', async ({ mount, page }) => {\n await mount(`<ix-drawer show>Content</ix-drawer>`);\n const drawer = page.locator('ix-drawer');\n await expect(drawer).toHaveClass(/hydrated/);\n await expect(drawer).toBeVisible();\n});\n\ntest('show by property', async ({ mount, page }) => {\n await mount(`<ix-drawer show>Content</ix-drawer>`);\n const drawer = page.locator('ix-drawer');\n\n await drawer.evaluate(\n (drawerElement: HTMLIxDrawerElement) => (drawerElement.show = true)\n );\n\n await expect(drawer).toHaveClass(/hydrated/);\n await expect(drawer).toBeVisible();\n});\n\ntest('toggle by property', async ({ mount, page }) => {\n await mount(`<ix-drawer show>Content</ix-drawer>`);\n const drawer = page.locator('ix-drawer');\n\n await drawer.evaluate(\n (drawerElement: HTMLIxDrawerElement) => (drawerElement.show = true)\n );\n\n await expect(drawer).toHaveClass(/hydrated/);\n await expect(drawer).toBeVisible();\n\n await drawer.evaluate(\n (drawerElement: HTMLIxDrawerElement) => (drawerElement.show = false)\n );\n\n await expect(drawer).not.toBeVisible();\n});\n"]}