@siemens/ix 3.0.0-alpha.3 → 3.0.0-alpha.4

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownItemCss","DropdownItem","constructor","hostRef","this","hover","disabled","checked","isSubMenu","suppressChecked","emitItemClick","itemClick","emit","hostElement","getDropdownItemElement","isIconOnly","label","undefined","innerText","icon","render","h","Host","key","class","submenu","role","type","tabIndex","onClick","name","iconSingleCheck","size","iconChevronRightSmall"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/hover';\n\n$itemPadding: 0.5rem;\n$itemPaddingRight: 1.5rem;\n$focusBorder: 0.0625rem;\n\n@mixin applyItemWidth($padding, $paddingRight) {\n  width: calc(100% - #{$padding} - #{$paddingRight});\n\n  padding: 0 $padding;\n  padding-right: $paddingRight;\n}\n\n:host {\n  --ix-dropdown-item-checked-color: var(--theme-color-primary);\n  @include ix-component;\n  display: flex;\n  flex-direction: row;\n\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n  overflow: hidden;\n  cursor: pointer;\n\n  .dropdown-item {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n    height: calc(100% - 2px);\n    @include applyItemWidth($itemPadding, $itemPaddingRight);\n    border: $focusBorder solid transparent;\n    white-space: nowrap;\n  }\n\n  .dropdown-item.no-checked-field {\n    @include applyItemWidth(1rem, $itemPaddingRight);\n  }\n\n  .dropdown-item:focus-visible {\n    border-color: var(--theme-color-focus-bdr);\n  }\n\n  .dropdown-item-checked {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    height: 100%;\n    width: 1rem;\n    min-width: 1rem;\n    margin-right: 0.5rem;\n\n    color: var(--ix-dropdown-item-checked-color);\n  }\n\n  .dropdown-item-icon {\n    margin-right: 0.5rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .dropdown-item-text {\n    display: block;\n    position: relative;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .submenu-icon {\n    margin-left: auto;\n  }\n}\n\n:host(.icon-only) {\n  .dropdown-item-icon {\n    margin-right: 0px;\n  }\n\n  .dropdown-item-checked {\n    display: none;\n  }\n\n  .dropdown-item {\n    @include applyItemWidth(0.5rem, 0.5rem);\n  }\n}\n\n:host(.submenu) {\n  .dropdown-item {\n    @include applyItemWidth($itemPadding, 0.5rem);\n  }\n}\n\n@include ghost-hover-pressed;\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-color-weak-text) !important;\n\n  .dropdown-item-icon {\n    color: var(--theme-color-weak-text) !important;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport {\n  iconChevronRightSmall,\n  iconSingleCheck,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /** @internal */\n  @Prop() isSubMenu = false;\n\n  /** @internal */\n  @Prop() suppressChecked = false;\n\n  /** @internal */\n  @Event() itemClick!: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /** @internal */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.hostElement;\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name={iconSingleCheck}\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon\n              name={iconChevronRightSmall}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAkB,qhF,MC8BXC,EAAY,MALzB,WAAAC,CAAAC,G,+CAqBUC,KAAKC,MAAG,MAKRD,KAAQE,SAAG,MAKXF,KAAOG,QAAG,MAGVH,KAASI,UAAG,MAGZJ,KAAeK,gBAAG,KAyE3B,CAlEC,mBAAMC,GACJN,KAAKO,UAAUC,KAAKR,KAAKS,Y,CAK3B,4BAAMC,GACJ,OAAOV,KAAKS,W,CAGN,UAAAE,GACN,OACEX,KAAKY,QAAUC,WACfb,KAAKS,YAAYK,YAAc,IAC/Bd,KAAKe,OAASF,S,CAIlB,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLnB,MAAOD,KAAKC,MACZ,YAAaD,KAAKW,aAClBT,SAAUF,KAAKE,SACfmB,QAASrB,KAAKI,WAEhBkB,KAAK,YAELL,EACE,UAAAE,IAAA,2CAAAI,KAAK,SACLC,SAAU,EACVJ,MAAO,CACL,gBAAiB,KACjB,mBAAoBpB,KAAKK,iBAE3BoB,QAAS,IAAMzB,KAAKM,kBAElBN,KAAKK,gBACLY,EAAK,OAAAG,MAAM,yBACRpB,KAAKG,QACJc,EACE,WAAAG,MAAM,YACNM,KAAMC,EACNC,KAAK,OAEL,MAEJ,KACH5B,KAAKe,KACJE,EAAA,WAASG,MAAM,qBAAqBM,KAAM1B,KAAKe,OAC7C,KACJE,EAAK,OAAAE,IAAA,2CAAAC,MAAM,sBACRpB,KAAKY,MACNK,EAAA,QAAAE,IAAA,8CAEDnB,KAAKI,UACJa,EAAA,WACES,KAAMG,EACNT,MAAO,iBAEP,M","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,f as t,h as r,H as i,c as o,F as a,g as s}from"./p-DtF9fwpD.js";import{m as d}from"./p-D6vSVaHq.js";import{D as c,I as n}from"./p-bDicGJUN.js";import{O as l}from"./p-DQmgxFuB.js";import{m as h}from"./p-bcj7UEIC.js";import{f as b,C as u,O as m}from"./p-CrTP-icT.js";const f=":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const g=class{constructor(t){e(this,t)}onResize(){t(this)}getSize(e){if(e===""){return this.size}if(e==="sm"){return this.sizeSm}if(e==="md"){return this.sizeMd}if(e==="lg"){return this.sizeLg}}getColumnSize(){let e;g.Breakpoints.forEach((t=>{const r=t!==""?d(t):true;if(!r){return}const i=this.getSize(t);if(i){e=i}}));return e}getColumnSizeStyling(){const e=this.getColumnSize();if(!e){return}if(e==="auto"){return{flex:"0 0 auto",width:"auto","max-width":"auto"}}const t=`calc(calc(${e} / var(--ix-layout-grid-columns)) * 100%)`;return{flex:`0 0 ${t}`,width:`${t}`,"max-width":`${t}`}}render(){return r(i,{key:"1486b26e26c4adaf280571418448803fe5aa3bcd",style:Object.assign({},this.getColumnSizeStyling())},r("slot",{key:"8ba70d9d630747b60ac0a38f5974db27f46777fc"}))}};g.Breakpoints=["","sm","md","lg"];g.style=f;const k=":host{display:block;position:relative;width:21rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(7, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid--show-week-numbers{grid-template-columns:24px repeat(7, 40px)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:first-child{width:24px}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset);background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.week-day .overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial;width:1.5rem}:host .button{display:flex;justify-content:flex-end;margin-top:1rem}:host .hidden{display:none}";var p=undefined&&undefined.__decorate||function(e,t,r,i){var o=arguments.length,a=o<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,r,i);else for(var d=e.length-1;d>=0;d--)if(s=e[d])a=(o<3?s(a):o>3?s(t,r,a):s(t,r))||a;return o>3&&a&&Object.defineProperty(t,r,a),a};const v=class{constructor(t){e(this,t);this.dateChange=o(this,"dateChange",7);this.dateRangeChange=o(this,"dateRangeChange",7);this.dateSelect=o(this,"dateSelect",7);this.format="yyyy/LL/dd";this.range=true;this.corners="rounded";this.minDate="";this.maxDate="";this.i18nDone="Done";this.weekStartIndex=0;this.showWeekNumbers=false;this.standaloneAppearance=true;this.today=c.now().toISO();this.selectedYear=0;this.tempYear=0;this.startYear=0;this.endYear=0;this.selectedMonth=0;this.tempMonth=0;this.dropdownButtonRef=h();this.yearContainerRef=h();this.firstMonthRef=h();this.focusedDay=1;this.isDayFocus=false;this.monthChangedFromFocus=false;this.DAYS_IN_WEEK=7;this.calendar=[]}watchFromPropHandler(e){var t;this.currFromDate=e?c.fromFormat(e,this.format):undefined;if((t=this.currFromDate)===null||t===void 0?void 0:t.isValid){this.selectedYear=this.currFromDate.year;this.selectedMonth=this.currFromDate.month-1}}watchToPropHandler(e){var t;this.currToDate=e?c.fromFormat(e,this.format):undefined;if((t=this.currToDate)===null||t===void 0?void 0:t.isValid){this.selectedYear=this.currToDate.year;this.selectedMonth=this.currToDate.month-1}}onLocaleChange(){this.setTranslations()}async getCurrentDate(){var e,t,r,i;const o=((e=this.currFromDate)===null||e===void 0?void 0:e.isValid)?(t=this.currFromDate)===null||t===void 0?void 0:t.toFormat(this.format):undefined;const a=((r=this.currToDate)===null||r===void 0?void 0:r.isValid)?(i=this.currToDate)===null||i===void 0?void 0:i.toFormat(this.format):undefined;if(this.range){return{from:o,to:a}}return{from:o,to:undefined}}handleKeyUp(e){if(!this.isDayFocus){return}let t=this.focusedDay;switch(e.key){case"ArrowLeft":t--;break;case"ArrowRight":t++;break;case"ArrowUp":t=t-7;break;case"ArrowDown":t=t+7;break;default:return}if(t>this.getDaysInCurrentMonth()){t=t-this.getDaysInCurrentMonth();this.changeToAdjacentMonth(1);this.monthChangedFromFocus=true}else if(t<1){this.changeToAdjacentMonth(-1);t=t+this.getDaysInCurrentMonth();this.monthChangedFromFocus=true}this.focusedDay=t}getDaysInCurrentMonth(){return c.utc(this.selectedYear,this.selectedMonth+1).daysInMonth||0}getDateTimeNow(){return c.fromISO(this.today)}onDayBlur(){this.isDayFocus=false}onDayFocus(){this.isDayFocus=true}componentWillLoad(){var e,t,r,i;this.setTranslations();this.currFromDate=this.from?c.fromFormat(this.from,this.format):undefined;this.currToDate=this.to?c.fromFormat(this.to,this.format):undefined;const o=(t=(e=this.currFromDate)===null||e===void 0?void 0:e.year)!==null&&t!==void 0?t:this.getDateTimeNow().year;this.startYear=o-5;this.endYear=o+5;this.selectedMonth=((i=(r=this.currFromDate)===null||r===void 0?void 0:r.month)!==null&&i!==void 0?i:this.getDateTimeNow().month)-1;this.selectedYear=o;this.tempMonth=this.selectedMonth;this.tempYear=this.selectedYear}componentWillRender(){this.calculateCalendar()}componentDidRender(){if(!this.monthChangedFromFocus&&!this.isDayFocus){return}const e=this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);e.focus()}setTranslations(){this.dayNames=this.rotateWeekDayNames(n.weekdays("long",{locale:this.locale}),this.weekStartIndex);this.monthNames=n.months("long",{locale:this.locale})}rotateWeekDayNames(e,t){const r=[...e];if(t===0){return r}t=-t;const i=e.length;r.push(...r.splice(0,(-t%i+i)%i));return r}async onDone(){const e=await this.getCurrentDate();this.dateSelect.emit(e)}calculateCalendar(){const e=[];const t=c.utc(this.selectedYear,this.selectedMonth+1);const r=t.startOf("month");const i=t.endOf("month");let o=r.weekNumber;let a=i.weekNumber;let s=r.weekday-1;let d=i.weekday-1;if(this.weekStartIndex!==0){const e=n.weekdays();const t=e[r.weekday];s=this.dayNames.findIndex((e=>e===t));const o=e[i.weekday];d=this.dayNames.findIndex((e=>e===o))}let l=false;if(a===1){a=i.weeksInWeekYear+1;l=true}let h=false;if(o===r.weeksInWeekYear){o=1;a++;h=true}let b=1;for(let t=o;t<=a&&b<=31;t++){const c=[];for(let e=0;e<this.DAYS_IN_WEEK&&b<=31;e++){if(t===o&&e<s||t===a&&e>d){c.push(undefined)}else{c.push(b++)}}if(h||l){if(t===1){e.push({weekNumber:r.weeksInWeekYear,dayNumbers:c})}else if(t===i.weekNumber){e.push({weekNumber:1,dayNumbers:c})}else{e.push({weekNumber:t-1,dayNumbers:c})}continue}e.push({weekNumber:t,dayNumbers:c})}this.calendar=e}selectTempYear(e,t){e===null||e===void 0?void 0:e.stopPropagation();this.tempYear=t}focusMonth(){var e;(e=this.firstMonthRef.current)===null||e===void 0?void 0:e.focus()}infiniteScrollYears(){const e=this.yearContainerRef.current;if(!e){return}const t=e.scrollTop;const r=e.scrollHeight;const i=t===0;const o=Math.round(t+e.offsetHeight)>=r;const a=200;if(this.endYear-this.startYear>a)return;if(i){const t=e.firstElementChild;this.startYear-=5;e.scrollTo(0,t.offsetTop);return}if(o){const t=e.lastElementChild;this.endYear+=5;e.scrollTo(0,t.offsetTop)}}selectMonth(e){this.selectedMonth=e;this.selectedYear=this.tempYear;this.tempMonth=e;const t=this.hostElement.shadowRoot.querySelector("ix-dropdown");if(t){t.show=false}}changeToAdjacentMonth(e){if(this.selectedMonth+e<0){this.selectedYear--;this.selectedMonth=11}else if(this.selectedMonth+e>11){this.selectedYear++;this.selectedMonth=0}else{this.selectedMonth+=e}}selectDay(e,t){if(t.classList.contains("disabled")){return}const r=c.fromJSDate(new Date(this.selectedYear,this.selectedMonth,e));if(!this.range||this.currFromDate===undefined){this.currFromDate=r;this.onDateChange();return}if(this.currToDate!==undefined){this.currFromDate=r;this.currToDate=undefined;this.onDateChange();return}if(r<this.currFromDate){this.currToDate=this.currFromDate;this.currFromDate=r;this.onDateChange();return}this.currToDate=r;this.onDateChange()}onDateChange(){this.getCurrentDate().then((e=>{this.dateChange.emit(e);if(this.range){this.dateRangeChange.emit(e)}}))}getDayClasses(e){var t,r,i;const o=this.getDateTimeNow();const a=c.fromJSDate(new Date(this.selectedYear,this.selectedMonth,e));return{"calendar-item":true,"empty-day":e===undefined,today:o.hasSame(a,"day"),selected:((t=this.currFromDate)===null||t===void 0?void 0:t.hasSame(a,"day"))||((r=this.currToDate)===null||r===void 0?void 0:r.hasSame(a,"day")),range:this.currFromDate&&a.startOf("day")>this.currFromDate.startOf("day")&&this.currToDate!==undefined&&a.startOf("day")<((i=this.currToDate)===null||i===void 0?void 0:i.startOf("day")),disabled:!this.isWithinMinMaxDate(a)}}isWithinMinMaxYear(e){const t=this.minDate?c.fromFormat(this.minDate,this.format).year:undefined;const r=this.maxDate?c.fromFormat(this.maxDate,this.format).year:undefined;const i=t?e<t:false;const o=r?e>r:false;return!i&&!o}isWithinMinMaxMonth(e){const t=this.minDate?c.fromFormat(this.minDate,this.format):undefined;const r=this.maxDate?c.fromFormat(this.maxDate,this.format):undefined;const i=t===null||t===void 0?void 0:t.month;const o=r===null||r===void 0?void 0:r.month;const a=i?this.tempYear===t.year&&e<i:false;const s=o?this.tempYear===r.year&&e>o:false;return!a&&!s}isWithinMinMaxDate(e){const t=this.minDate?c.fromFormat(this.minDate,this.format):undefined;const r=this.maxDate?c.fromFormat(this.maxDate,this.format):undefined;const i=t?e.startOf("day")<t.startOf("day"):false;const o=r?e.startOf("day")>r.startOf("day"):false;return!i&&!o}renderYears(){const e=[];for(let t=this.startYear;t<=this.endYear;t++){e.push(r("div",{key:t,class:{arrowYear:true,"month-dropdown-item":true,"disabled-item":!this.isWithinMinMaxYear(t)},onClick:e=>this.selectTempYear(e,t),onKeyUp:e=>{if(e.key==="Enter"){this.tempYear=t;this.focusMonth()}},tabIndex:0},r("ix-icon",{class:{hidden:this.tempYear!==t,arrowPosition:true},name:b,size:"12"}),r("div",{style:{"min-width":"max-content"}},`${t}`)))}return e}render(){return r(i,{key:"c572010198012b0665e0741ac6f2f280c22096f0"},r("ix-date-time-card",{key:"857ff058a49313ba01f69eb0403b2a32b9864b86",corners:this.corners,standaloneAppearance:this.standaloneAppearance},r("div",{key:"83368f09237939c0cc2d2ce7b4620f90615f8c57",class:"header",slot:"header"},r("ix-icon-button",{key:"89e152476b95ea3770dfb77ad6948a9250b0a1fa",onClick:()=>this.changeToAdjacentMonth(-1),ghost:true,icon:u,variant:"primary",class:"arrows"}),r("div",{key:"1a2ddbb791a05051745849b6b33da90a1ed6d53a",class:"selector"},r("ix-button",{key:"928e85ca6c02ccf0047b08101cfbb0a1d2a17fb6",ghost:true,ref:this.dropdownButtonRef,"data-testid":"year-month-button"},r("span",{key:"e723fa8c27d59c125f797b0adf36b07c0ead0a33",class:"fontSize capitalize"},this.monthNames[this.selectedMonth]," ",this.selectedYear)),r("ix-dropdown",{key:"3242fad1cd893de2b7c58cac2777eb71f3815f37","data-testid":"year-month-dropdown",class:"dropdown",trigger:this.dropdownButtonRef.waitForCurrent(),ignoreRelatedSubmenu:true,placement:"bottom-start"},r("div",{key:"72e107ef50026706d25e8a6291d791dac3288e2b",class:"wrapper"},r("div",{key:"962ea0d6c91bab3f9b6c86792d0d59687b30fbf4","data-testid":"year-container",class:"overflow",onScroll:()=>this.infiniteScrollYears(),ref:this.yearContainerRef},this.renderYears()),r("div",{key:"c1902b23595de8fe97cc8dbcde44da5dea65b5d9",class:"overflow","data-testid":"month-container"},this.monthNames.map(((e,t)=>r("div",{key:e,ref:t=>{if(e===this.monthNames[0]){this.firstMonthRef(t)}},class:{arrowYear:true,"month-dropdown-item":true,selected:this.tempYear===this.selectedYear&&this.tempMonth===t,"disabled-item":!this.isWithinMinMaxMonth(t)},onClick:()=>this.selectMonth(t),onKeyUp:e=>e.key==="Enter"&&this.selectMonth(t),tabIndex:0},r("ix-icon",{class:{hidden:this.tempYear!==this.selectedYear||this.tempMonth!==t,checkPosition:true},name:m,size:"16"}),r("div",null,r("span",{class:"capitalize monthMargin"},`${e} ${this.tempYear}`))))))))),r("ix-icon-button",{key:"d39bbbc40e27105d7f5575f95e17d777b2fc905a",onClick:()=>this.changeToAdjacentMonth(1),ghost:true,icon:b,variant:"primary",class:"arrows"})),r("div",{key:"8ce294f4edfc8578be98290467610d79ef8c1b78",class:{grid:true,"grid--show-week-numbers":this.showWeekNumbers}},this.showWeekNumbers&&r("div",{key:"0027a35f4c3841e57ed6ce0571183150b8b85e65",class:"calendar-item week-day"}),this.dayNames.map((e=>r("div",{key:e,class:"calendar-item week-day"},r("div",{class:"overflow"},e.slice(0,3))))),this.calendar.map((e=>r(a,null,this.showWeekNumbers&&r("div",{class:"calendar-item week-number"},e.weekNumber),e.dayNumbers.map((e=>e?r("div",{key:e,id:`day-cell-${e}`,"date-calender-day":true,class:this.getDayClasses(e),onClick:t=>{const r=t.currentTarget;this.selectDay(e,r)},onKeyUp:t=>{const r=t.currentTarget;if(t.key==="Enter"){this.selectDay(e,r)}},tabIndex:e===this.focusedDay?0:-1,onFocus:()=>this.onDayFocus(),onBlur:()=>this.onDayBlur()},e):r("div",null))))))),r("div",{key:"0c5f2867820eb6d58239a3d6029cb8aba2ddcc3c",class:{button:true,hidden:!this.range||!this.standaloneAppearance}},r("ix-button",{key:"d2f8f634517f6847490e579c47e2f3ec8aaecc34",onClick:()=>this.onDone()},this.i18nDone))))}get hostElement(){return s(this)}static get watchers(){return{from:["watchFromPropHandler"],to:["watchToPropHandler"],locale:["onLocaleChange"]}}};p([l("keydown")],v.prototype,"handleKeyUp",null);v.style=k;const y=":host{--ix-layout-grid-gutter:24px;display:block;flex:1 1 0%;width:100%;padding-left:calc(var(--ix-layout-grid-gutter) * 0.5);padding-right:calc(var(--ix-layout-grid-gutter) * 0.5)}:host(.no-margin){padding-left:0;padding-right:0}";const w=class{constructor(t){e(this,t);this.noMargin=false;this.gap="24";this.columns=12}render(){return r(i,{key:"90429a1d956a697a73dd9c7263ada3507c558547",class:{"no-margin":this.noMargin},style:{"--ix-layout-grid-columns":`${this.columns}`,"--ix-layout-grid-gutter":`${this.gap}px`}},r("slot",{key:"34f4bb1ff2d8fd675df91798bfda5ce3d7075fa3"}))}};w.style=y;const x=":host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}";const D=class{constructor(t){e(this,t)}render(){return r(i,{key:"80ca71d97810db517f4b4f7992449b19c6337076"},r("slot",{key:"1bae8e11e1ca4a4625b17489110e460a5cfe5002"}))}};D.style=x;export{g as ix_col,v as ix_date_picker,w as ix_layout_grid,D as ix_row};
-//# sourceMappingURL=p-ec92f199.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["colCss","Col","onResize","forceUpdate","this","getSize","breakpoint","size","sizeSm","sizeMd","sizeLg","getColumnSize","Breakpoints","forEach","isMediaQueryActive","matchBreakpoint","currentSize","getColumnSizeStyling","flex","width","colSize","render","h","Host","key","style","Object","assign","datePickerCss","DatePicker","constructor","hostRef","format","range","corners","minDate","maxDate","i18nDone","weekStartIndex","showWeekNumbers","standaloneAppearance","today","DateTime","now","toISO","selectedYear","tempYear","startYear","endYear","selectedMonth","tempMonth","dropdownButtonRef","makeRef","yearContainerRef","firstMonthRef","focusedDay","isDayFocus","monthChangedFromFocus","DAYS_IN_WEEK","calendar","watchFromPropHandler","newValue","currFromDate","fromFormat","undefined","_a","isValid","year","month","watchToPropHandler","currToDate","onLocaleChange","setTranslations","getCurrentDate","_from","_b","toFormat","_to","_c","_d","from","to","handleKeyUp","event","_focusedDay","getDaysInCurrentMonth","changeToAdjacentMonth","utc","daysInMonth","getDateTimeNow","fromISO","onDayBlur","onDayFocus","componentWillLoad","componentWillRender","calculateCalendar","componentDidRender","dayElem","hostElement","shadowRoot","querySelector","focus","dayNames","rotateWeekDayNames","Info","weekdays","locale","monthNames","months","index","clone","len","length","push","splice","onDone","date","dateSelect","emit","monthStart","startOf","monthEnd","endOf","startWeek","weekNumber","endWeek","monthStartWeekDayIndex","weekday","monthEndWeekDayIndex","monthStartWeekDayName","findIndex","d","monthEndWeekDayName","correctLastWeek","weeksInWeekYear","correctFirstWeek","currDayNumber","weekIndex","daysArr","j","dayNumbers","selectTempYear","stopPropagation","focusMonth","current","infiniteScrollYears","yearContainer","scroll","scrollTop","maxScroll","scrollHeight","atTop","atBottom","Math","round","offsetHeight","limit","first","firstElementChild","scrollTo","offsetTop","last","lastElementChild","selectMonth","dropdown","show","number","selectDay","selectedDay","target","classList","contains","fromJSDate","Date","onDateChange","then","dateChange","dateRangeChange","getDayClasses","day","todayObj","selectedDayObj","hasSame","selected","disabled","isWithinMinMaxDate","isWithinMinMaxYear","minDateYear","maxDateYear","isBefore","isAfter","isWithinMinMaxMonth","minDateObj","maxDateObj","minDateMonth","maxDateMonth","_minDate","_maxDate","renderYears","rows","class","arrowYear","onClick","onKeyUp","tabIndex","hidden","arrowPosition","name","iconChevronRightSmall","slot","ghost","icon","iconChevronLeftSmall","variant","ref","trigger","waitForCurrent","ignoreRelatedSubmenu","placement","onScroll","map","checkPosition","iconSingleCheck","grid","slice","week","Fragment","id","e","currentTarget","onFocus","onBlur","button","__decorate","OnListener","prototype","layoutGridCss","LayoutGrid","noMargin","gap","columns","rowCss","Row"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx","src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/layout-grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/layout-grid/layout-grid.tsx","src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  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: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { 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(): ColumnSize | undefined {\n    let size: ColumnSize | undefined;\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@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 21rem;\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(7, 40px);\n    grid-template-rows: repeat(7, 40px);\n\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    &--show-week-numbers {\n      grid-template-columns: 24px repeat(7, 40px);\n    }\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      &:first-child {\n        width: 24px;\n      }\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n\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      &.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        .overflow {\n          @include ellipsis;\n        }\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        width: 1.5rem;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: $default-space;\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';\nimport { DateTime, Info } from 'luxon';\nimport { OnListener } from '../utils/listener';\nimport { IxDatePickerComponent } from './date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n  iconSingleCheck,\n} from '@siemens/ix-icons/icons';\n\nexport type DateChangeEvent = {\n  from?: string;\n  to?: string;\n};\n\ninterface CalendarWeek {\n  weekNumber: number;\n  dayNumbers: (number | undefined)[];\n}\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements IxDatePickerComponent {\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 = '';\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 = '';\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   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale?: string;\n\n  @Watch('locale')\n  onLocaleChange() {\n    this.setTranslations();\n  }\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\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   * 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 = 0;\n  @State() tempYear = 0;\n  @State() startYear = 0;\n  @State() endYear = 0;\n  @State() selectedMonth = 0;\n  @State() tempMonth = 0;\n\n  private readonly dropdownButtonRef = makeRef<HTMLElement>();\n  private readonly yearContainerRef = makeRef<HTMLElement>();\n  private readonly firstMonthRef = makeRef<HTMLElement>();\n\n  @State() dayNames!: string[];\n  @State() monthNames!: string[];\n  @State() focusedDay: number = 1;\n\n  private isDayFocus = false;\n  private monthChangedFromFocus = false;\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 (\n      DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0\n    );\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 | undefined)[] = [];\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.current?.focus();\n  }\n\n  private infiniteScrollYears() {\n    const yearContainer = this.yearContainerRef.current;\n\n    if (!yearContainer) {\n      return;\n    }\n\n    const scroll = yearContainer.scrollTop;\n    const maxScroll = yearContainer.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;\n    const limit = 200;\n\n    if (this.endYear - this.startYear > limit) return;\n\n    if (atTop) {\n      const first = yearContainer.firstElementChild as HTMLElement;\n      this.startYear -= 5;\n      yearContainer.scrollTo(0, first.offsetTop);\n\n      return;\n    }\n\n    if (atBottom) {\n      const last = yearContainer.lastElementChild as HTMLElement;\n      this.endYear += 5;\n      yearContainer.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    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n    if (dropdown) {\n      dropdown.show = false;\n    }\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, target: Element) {\n    if (target.classList.contains('disabled')) {\n      return;\n    }\n\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    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        this.currFromDate &&\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.tempYear = 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={iconChevronRightSmall}\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={iconChevronLeftSmall}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n            <div class=\"selector\">\n              <ix-button\n                ghost\n                ref={this.dropdownButtonRef}\n                data-testid=\"year-month-button\"\n              >\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.selectedMonth]} {this.selectedYear}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                data-testid=\"year-month-dropdown\"\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef.waitForCurrent()}\n                ignoreRelatedSubmenu\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    data-testid=\"year-container\"\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={this.yearContainerRef}\n                  >\n                    {this.renderYears()}\n                  </div>\n                  <div class=\"overflow\" data-testid=\"month-container\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        ref={(ref) => {\n                          if (month === this.monthNames[0]) {\n                            this.firstMonthRef(ref);\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={iconSingleCheck}\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={iconChevronRightSmall}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n          <div\n            class={{\n              grid: true,\n              'grid--show-week-numbers': this.showWeekNumbers,\n            }}\n          >\n            {this.showWeekNumbers && <div class=\"calendar-item week-day\"></div>}\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                <div class=\"overflow\">{name.slice(0, 3)}</div>\n              </div>\n            ))}\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  {this.showWeekNumbers && (\n                    <div class=\"calendar-item week-number\">\n                      {week.weekNumber}\n                    </div>\n                  )}\n                  {week.dayNumbers.map((day) => {\n                    return day ? (\n                      <div\n                        key={day}\n                        id={`day-cell-${day}`}\n                        date-calender-day\n                        class={this.getDayClasses(day)}\n                        onClick={(e) => {\n                          const target = e.currentTarget as HTMLElement;\n                          this.selectDay(day, target);\n                        }}\n                        onKeyUp={(e) => {\n                          const target = e.currentTarget as HTMLElement;\n                          if (e.key === 'Enter') {\n                            this.selectDay(day, target);\n                          }\n                        }}\n                        tabIndex={day === this.focusedDay ? 0 : -1}\n                        onFocus={() => this.onDayFocus()}\n                        onBlur={() => this.onDayBlur()}\n                      >\n                        {day}\n                      </div>\n                    ) : (\n                      <div></div>\n                    );\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()}>{this.i18nDone}</ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n: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: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { 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: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: 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: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as s,g as o}from"./p-DtF9fwpD.js";import{B as r,j as n,q as h}from"./p-CrTP-icT.js";import{a as l}from"./p-Bb7pDeaQ.js";import{A as a}from"./p-CUWFODSd.js";import{H as d}from"./p-Cdt22lfd.js";import{O as c}from"./p-DQmgxFuB.js";import{m as u}from"./p-bcj7UEIC.js";import{c as f}from"./p-CX81WQtk.js";import"./p-CKoABG1h.js";const b=":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .display-none{display:none}:host .select{position:relative;display:flex;align-items:center;width:100%;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container ix-icon-button{height:1.875rem;width:1.875rem;min-height:1.875rem;min-width:1.875rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host ix-dropdown{max-width:100%}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--invalid);background-color:var(--theme-input--background--invalid);box-shadow:none}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}";var v=undefined&&undefined.__decorate||function(t,i,e,s){var o=arguments.length,r=o<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,e):s,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,s);else for(var h=t.length-1;h>=0;h--)if(n=t[h])r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r;return o>3&&r&&Object.defineProperty(i,e,r),r};const p=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.inputChange=i(this,"inputChange",7);this.addItem=i(this,"addItem",7);this.ixBlur=i(this,"ixBlur",7);if(e.$hostElement$["s-ei"]){this.formInternals=e.$hostElement$["s-ei"]}else{this.formInternals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.formInternals}this.required=false;this.value=[];this.allowClear=false;this.mode="single";this.editable=false;this.disabled=false;this.readonly=false;this.i18nPlaceholder="Select an option";this.i18nPlaceholderEditable="Type of select option";this.i18nSelectListHeader="Select an option";this.i18nNoMatches="No matches";this.hideListHeader=false;this.dropdownShow=false;this.selectedLabels=[];this.isDropdownEmpty=false;this.inputFilterText="";this.inputValue="";this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.dropdownWrapperRef=u();this.dropdownAnchorRef=u();this.inputRef=u();this.touched=false;this.itemObserver=f((()=>{if(!this.arrowFocusController){return}this.arrowFocusController.items=this.visibleNonShadowItems}));this.focusControllerCallbackBind=this.focusDropdownItem.bind(this)}get nonShadowItems(){return Array.from(this.hostElement.querySelectorAll("ix-select-item"))}get visibleNonShadowItems(){return this.nonShadowItems.filter((t=>!t.classList.contains("display-none")))}get shadowItems(){return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-select-item"))}get visibleShadowItems(){return this.shadowItems.filter((t=>!t.classList.contains("display-none")))}get items(){return[...this.nonShadowItems,...this.shadowItems]}get visibleItems(){return this.items.filter((t=>!t.classList.contains("display-none")))}get selectedItems(){return this.items.filter((t=>t.selected))}get addItemButton(){return this.hostElement.shadowRoot.querySelector(".add-item")}get isSingleMode(){return this.mode==="single"}get isMultipleMode(){return this.mode==="multiple"}get isEveryDropdownItemHidden(){return this.items.every((t=>t.classList.contains("display-none")))}watchValue(t){this.value=t;this.updateSelection()}watchDropdownShow(t){if(t&&this.dropdownElement){this.itemObserver.observe(this.dropdownElement,{childList:true,subtree:true})}else{this.cleanupResources()}}cleanupResources(){var t,i;(t=this.arrowFocusController)===null||t===void 0?void 0:t.disconnect();this.arrowFocusController=undefined;(i=this.itemObserver)===null||i===void 0?void 0:i.disconnect()}onItemClicked(t){const i=t.detail;this.itemClick(i)}updateFormInternalValue(t){if(Array.isArray(t)){this.formInternals.setFormValue(t.join(","));return}this.formInternals.setFormValue(t)}async hasValidValue(){return this.required&&!!this.hasValue()}hasValue(){if(Array.isArray(this.value)){return!!this.value.length}return!!this.value}focusDropdownItem(t){var i,e;this.navigationItem=undefined;if(t<this.visibleNonShadowItems.length){const s=(e=(i=this.visibleNonShadowItems[t])===null||i===void 0?void 0:i.shadowRoot)===null||e===void 0?void 0:e.querySelector("ix-dropdown-item");if(!s){return}requestAnimationFrame((()=>{var t,i;(i=(t=s===null||s===void 0?void 0:s.shadowRoot)===null||t===void 0?void 0:t.querySelector("button"))===null||i===void 0?void 0:i.focus()}))}}itemClick(t){const i=this.value;const e=this.toggleValue(t);this.value=e;const s=this.emitValueChange(e);if(s){this.value=i;return}this.updateSelection()}emitAddItem(t){var i;if(t===undefined||t.trim()===""){return false}const{defaultPrevented:e}=this.addItem.emit(t);if(e){return true}const s=document.createElement("ix-select-item");s.value=t;s.label=t;(i=this.customItemsContainerElement)===null||i===void 0?void 0:i.appendChild(s);this.clearInput();this.itemClick(t);return false}toggleValue(t){if(!this.isMultipleMode){return t}if(!this.value){return[t]}let i=this.value;if(!Array.isArray(i)){i=[i]}if(i.includes(t)){return i.filter((i=>i!==t))}else{return[...i,t]}}updateSelection(){var t,i;let e=[];if(this.value){e=Array.isArray(this.value)?[...this.value]:[this.value]}this.items.forEach((t=>{t.selected=e.some((i=>{if(typeof i!==typeof t.value){return i.toString()===t.value.toString()}else{return i===t.value}}))}));this.selectedLabels=this.selectedItems.map((t=>t.label));if(((t=this.selectedLabels)===null||t===void 0?void 0:t.length)&&this.isSingleMode){this.inputValue=(i=this.selectedLabels[0])!==null&&i!==void 0?i:""}else{this.inputValue=""}this.inputElement&&(this.inputElement.value=this.inputValue)}emitValueChange(t){const{defaultPrevented:i}=this.valueChange.emit(t);if(i){return true}this.updateFormInternalValue(t);return false}componentDidLoad(){var t;(t=this.inputElement)===null||t===void 0?void 0:t.addEventListener("input",(()=>{var t;this.dropdownShow=true;this.inputChange.emit((t=this.inputElement)===null||t===void 0?void 0:t.value)}))}componentWillLoad(){this.updateSelection();this.updateFormInternalValue(this.value)}componentDidRender(){if(!this.dropdownShow||this.arrowFocusController||!this.dropdownElement){return}this.arrowFocusController=new a(this.visibleNonShadowItems,this.dropdownElement,this.focusControllerCallbackBind);this.arrowFocusController.wrap=!this.isAddItemVisible()&&!this.visibleShadowItems.length}onLabelChange(t){t.preventDefault();t.stopImmediatePropagation();this.updateSelection()}disconnectedCallback(){this.cleanupResources()}itemExists(t){return this.items.find((i=>i.label===t))}dropdownVisibilityChanged(t){var i,e;this.dropdownShow=t.detail;if(t.detail){(i=this.inputElement)===null||i===void 0?void 0:i.focus();(e=this.inputElement)===null||e===void 0?void 0:e.select();this.removeHiddenFromItems();this.isDropdownEmpty=this.isEveryDropdownItemHidden}else{this.navigationItem=undefined;this.updateSelection();this.inputFilterText=""}}async onKeyDown(t){if(t.code==="ArrowDown"||t.code==="ArrowUp"){await this.onArrowNavigation(t,t.code)}if(!this.dropdownShow){return}if(t.code==="Enter"||t.code==="NumpadEnter"){await this.onEnterNavigation(t.target)}if(t.code==="Escape"){this.dropdownShow=false}}async onEnterNavigation(t){if(this.isMultipleMode){return}const i=this.inputFilterText.trim();const e=t===null||t===void 0?void 0:t.label;const s=this.itemExists(i);if(s){this.itemClick(s.value)}else if(this.editable&&!this.itemExists(e)){const t=this.emitAddItem(i);if(t){return}}this.dropdownShow=false;this.updateSelection()}async onArrowNavigation(t,i){var e;if(t.defaultPrevented){return}t.preventDefault();t.stopPropagation();this.dropdownShow=true;if(!this.navigationItem&&document.activeElement===this.hostElement){if(this.visibleItems.length){this.applyFocusTo(this.visibleItems.shift())}else if(this.isAddItemVisible()){this.focusAddItemButton()}return}const s=i==="ArrowUp";const o=document.activeElement?this.visibleNonShadowItems.indexOf(document.activeElement):-1;if(o===0){if(!this.visibleShadowItems.length&&this.isAddItemVisible()){this.focusAddItemButton()}else{this.applyFocusTo(this.visibleShadowItems.pop())}return}else if(o!==-1&&o===this.visibleNonShadowItems.length-1){if(this.visibleShadowItems.length){this.applyFocusTo(this.visibleShadowItems.shift())}else if(this.isAddItemVisible()){this.focusAddItemButton()}return}if(!this.navigationItem){return}if(this.isAddItemVisible()&&((e=this.addItemElement)===null||e===void 0?void 0:e.contains(await this.navigationItem.getDropdownItemElement()))){if(s){this.applyFocusTo(this.visibleItems.pop())}else if(this.visibleItems.length){this.applyFocusTo(this.visibleItems.shift())}return}const r=this.visibleShadowItems.indexOf(this.navigationItem);if(s){if(r===0){if(this.visibleNonShadowItems.length){this.applyFocusTo(this.visibleNonShadowItems.pop())}else if(this.isAddItemVisible()){this.focusAddItemButton()}}else{this.applyFocusTo(this.visibleShadowItems[r-1])}}else{if(r===this.visibleShadowItems.length-1){if(this.isAddItemVisible()){this.focusAddItemButton()}else{this.applyFocusTo(this.visibleItems.shift())}}else{this.applyFocusTo(this.visibleShadowItems[r+1])}}}applyFocusTo(t){if(!t){return}this.navigationItem=t;setTimeout((()=>{var i,e,s,o;(o=(s=(e=(i=t.shadowRoot)===null||i===void 0?void 0:i.querySelector("ix-dropdown-item"))===null||e===void 0?void 0:e.shadowRoot)===null||s===void 0?void 0:s.querySelector("button"))===null||o===void 0?void 0:o.focus()}))}focusAddItemButton(){var t,i;if(this.addItemButton){(i=(t=this.addItemButton.shadowRoot)===null||t===void 0?void 0:t.querySelector("button"))===null||i===void 0?void 0:i.focus();this.navigationItem=this.addItemElement}}filterItemsWithTypeahead(){var t,i;this.inputFilterText=(i=(t=this.inputElement)===null||t===void 0?void 0:t.value)!==null&&i!==void 0?i:"";if(this.isSingleMode&&this.inputFilterText===this.selectedLabels[0]){return}if(this.inputFilterText){this.items.forEach((t=>{var i;t.classList.remove("display-none");if(!((i=t.label)===null||i===void 0?void 0:i.toLowerCase().includes(this.inputFilterText.toLowerCase()))){t.classList.add("display-none")}}))}else{this.removeHiddenFromItems()}if(this.arrowFocusController){this.arrowFocusController.items=this.visibleNonShadowItems}this.isDropdownEmpty=this.isEveryDropdownItemHidden}removeHiddenFromItems(){this.items.forEach((t=>{t.classList.remove("display-none")}))}clearInput(){if(this.inputElement){this.inputElement.value=""}this.inputFilterText=""}clear(){this.clearInput();this.selectedLabels=[];this.value=[];this.emitValueChange([]);this.dropdownShow=false}onInputBlur(t){this.ixBlur.emit();this.touched=true;if(this.editable){return}if(this.isSingleMode){return}const i=t.target;if(!this.dropdownShow&&this.mode!=="multiple"){i.value=this.selectedLabels.toString()}}placeholderValue(){if(this.disabled){return""}if(this.readonly){return""}if(this.editable){return this.i18nPlaceholderEditable}return this.i18nPlaceholder}isAddItemVisible(){return!this.itemExists(this.inputFilterText)&&this.editable&&this.inputFilterText}onValidationChange({isInvalid:t,isInvalidByRequired:i,isValid:e,isInfo:s,isWarning:o}){this.isInvalid=t||i;this.isValid=e;this.isWarning=o;this.isInfo=s}async getAssociatedFormElement(){return this.formInternals.form}getNativeInputElement(){if(this.inputElement){return Promise.resolve(this.inputElement)}else{return Promise.reject(new Error("Input element not found"))}}async focusInput(){const t=await this.getNativeInputElement();if(t){t.focus()}}isTouched(){return Promise.resolve(this.touched)}render(){var t,i,o,a;return e(s,{key:"55e80c58e958e97655e20cba14b287ca41fe776d","aria-disabled":l(this.disabled),class:{disabled:this.disabled}},e("ix-field-wrapper",{key:"50ed9d3c9b6e70f2e1d684bdac081c2efdd1c773",required:this.required,label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,warningText:this.warningText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,controlRef:this.inputRef},e("div",{key:"483a09e87ba81dc50db0d30c9858872af2603ff9",class:{select:true,disabled:this.disabled,readonly:this.readonly},ref:t=>{this.dropdownAnchorRef(t);if(!this.editable)this.dropdownWrapperRef(t)}},e("div",{key:"9e18c8c0882aaf5aadc80d259cd91ce1f7f52f82",class:"input-container"},e("div",{key:"29307561099593acfb45603cebd2136d06ce547b",class:"chips"},this.isMultipleMode?(t=this.selectedItems)===null||t===void 0?void 0:t.map((t=>e("ix-filter-chip",{disabled:this.disabled||this.readonly,key:t.value,onCloseClick:i=>{i.preventDefault();i.stopPropagation();this.itemClick(t.value)}},t.label))):"",e("div",{key:"ea337cc33b09f544899a9d3d47764f880c8dfcff",class:"trigger"},e("input",{key:"ffeb71a4df620ea1611ecf69eca18015ef148496",autocomplete:"off","data-testid":"input",disabled:this.disabled,readOnly:this.readonly,required:this.required,type:"text",class:{"allow-clear":this.allowClear&&!!((i=this.selectedLabels)===null||i===void 0?void 0:i.length)},placeholder:this.placeholderValue(),value:(o=this.inputValue)!==null&&o!==void 0?o:"",ref:t=>{this.inputElement=t;this.inputRef(t)},onBlur:t=>this.onInputBlur(t),onFocus:()=>{this.navigationItem=undefined},onInput:()=>this.filterItemsWithTypeahead(),onKeyDown:t=>this.onKeyDown(t)}),this.allowClear&&!this.disabled&&!this.readonly&&(((a=this.selectedLabels)===null||a===void 0?void 0:a.length)||this.inputFilterText)?e("ix-icon-button",{class:"clear",icon:n,ghost:true,oval:true,size:"16",onClick:t=>{t.preventDefault();t.stopPropagation();this.clear()}}):null,this.disabled||this.readonly?null:e("ix-icon-button",{"data-select-dropdown":true,class:{"dropdown-visible":this.dropdownShow},icon:h,ghost:true,ref:t=>{if(this.editable)this.dropdownWrapperRef(t)}})))))),e("ix-dropdown",{key:"04161cb0115afc2e60efd249d393a9e81f42fe61",ref:t=>this.dropdownElement=t,show:this.dropdownShow,closeBehavior:this.isMultipleMode?"outside":"both",class:{"display-none":this.disabled||this.readonly},anchor:this.dropdownAnchorRef.waitForCurrent(),trigger:this.dropdownWrapperRef.waitForCurrent(),onShowChanged:t=>this.dropdownVisibilityChanged(t),placement:"bottom-start",overwriteDropdownStyle:async()=>{var t,i;const e={};const s=(i=(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector(".select"))===null||i===void 0?void 0:i.getBoundingClientRect().width;if(s){e.minWidth=`${s}px`}if(this.dropdownWidth){e.width=`min(${this.dropdownWidth}, 100%)`}if(this.dropdownMaxWidth){e.maxWidth=`min(${this.dropdownMaxWidth}, 100%)`}return e}},e("div",{key:"5a61493471aa83b381f064cfc40df1801784e965",class:{"select-list-header":true,hidden:this.hideListHeader||this.isDropdownEmpty},title:this.i18nSelectListHeader,onClick:t=>t.preventDefault()},this.i18nSelectListHeader),e("slot",{key:"26c2660ab8c2ff9d65d5255b1a23e775898d3b7b",onSlotchange:()=>{this.updateSelection()}}),e("div",{key:"62f0835c1eb2c3678e22790c030f911b262abf54",ref:t=>this.customItemsContainerElement=t}),this.isAddItemVisible()?e("ix-dropdown-item",{"data-testid":"add-item",icon:r,class:{"add-item":true},label:this.inputFilterText,onItemClick:t=>{t.preventDefault();t.stopPropagation();this.emitAddItem(this.inputFilterText)},onFocus:()=>this.navigationItem=this.addItemElement,ref:t=>{this.addItemElement=t}}):null,this.isDropdownEmpty&&!this.editable?e("div",{class:"select-list-header"},this.i18nNoMatches):""))}static get formAssociated(){return true}get hostElement(){return o(this)}static get watchers(){return{value:["watchValue"],dropdownShow:["watchDropdownShow"]}}};v([c("keydown",(t=>t.dropdownShow))],p.prototype,"onKeyDown",null);v([d()],p.prototype,"onValidationChange",null);p.style=b;export{p as ix_select};
-//# sourceMappingURL=p-f607e4c0.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","Select","constructor","hostRef","this","required","value","allowClear","mode","editable","disabled","readonly","i18nPlaceholder","i18nPlaceholderEditable","i18nSelectListHeader","i18nNoMatches","hideListHeader","dropdownShow","selectedLabels","isDropdownEmpty","inputFilterText","inputValue","isInvalid","isValid","isInfo","isWarning","dropdownWrapperRef","makeRef","dropdownAnchorRef","inputRef","touched","itemObserver","createMutationObserver","arrowFocusController","items","visibleNonShadowItems","focusControllerCallbackBind","focusDropdownItem","bind","nonShadowItems","Array","from","hostElement","querySelectorAll","filter","item","classList","contains","shadowItems","shadowRoot","visibleShadowItems","visibleItems","selectedItems","selected","addItemButton","querySelector","isSingleMode","isMultipleMode","isEveryDropdownItemHidden","every","watchValue","updateSelection","watchDropdownShow","show","dropdownElement","observe","childList","subtree","cleanupResources","_a","disconnect","undefined","_b","onItemClicked","event","newId","detail","itemClick","updateFormInternalValue","isArray","formInternals","setFormValue","join","hasValidValue","hasValue","length","index","navigationItem","nestedDropdownItem","requestAnimationFrame","focus","oldValue","toggleValue","defaultPrevented","emitValueChange","emitAddItem","trim","addItem","emit","newItem","document","createElement","label","customItemsContainerElement","appendChild","clearInput","itemValue","includes","ids","forEach","some","i","toString","map","inputElement","valueChange","componentDidLoad","addEventListener","inputChange","componentWillLoad","componentDidRender","ArrowFocusController","wrap","isAddItemVisible","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","itemExists","find","dropdownVisibilityChanged","select","removeHiddenFromItems","onKeyDown","code","onArrowNavigation","onEnterNavigation","target","el","trimmedInput","itemLabel","key","stopPropagation","activeElement","applyFocusTo","shift","focusAddItemButton","moveUp","indexNonShadow","indexOf","pop","addItemElement","getDropdownItemElement","indexShadow","element","setTimeout","_d","_c","filterItemsWithTypeahead","remove","toLowerCase","add","clear","onInputBlur","ixBlur","placeholderValue","onValidationChange","isInvalidByRequired","getAssociatedFormElement","form","getNativeInputElement","Promise","resolve","reject","Error","focusInput","isTouched","render","h","Host","a11yBoolean","class","helperText","invalidText","infoText","warningText","validText","showTextAsTooltip","controlRef","ref","onCloseClick","e","autocomplete","readOnly","type","placeholder","onBlur","onFocus","onInput","icon","iconClear","ghost","oval","size","onClick","iconChevronDownSmall","closeBehavior","anchor","waitForCurrent","trigger","onShowChanged","placement","overwriteDropdownStyle","async","styleOverwrites","minWidth","getBoundingClientRect","width","dropdownWidth","dropdownMaxWidth","maxWidth","hidden","title","onSlotchange","iconPlus","onItemClick","__decorate","OnListener","self","prototype","HookValidationLifecycle"],"sources":["src/components/select/select.scss?tag=ix-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/field';\n@import 'mixins/validation/form-component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  min-height: 2rem;\n  height: auto;\n  border-radius: var(--theme-input--border-radius);\n\n  .display-none {\n    display: none;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n    box-shadow: var(--theme-inset-shadow-1) !important;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .select.readonly,\n  .select.disabled {\n    box-shadow: none !important;\n    border: none;\n    border-radius: 0;\n    cursor: pointer;\n\n    &,\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n\n    &:focus,\n    &:focus-within,\n    &:focus-visible {\n      outline: none;\n    }\n\n    input:focus,\n    input:focus-visible {\n      outline: none;\n    }\n  }\n\n  .select.disabled {\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-weak-bdr);\n\n    input {\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  .select.readonly {\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-soft-bdr);\n\n    input {\n      color: var(--theme-color-std-text);\n    }\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    ix-icon-button {\n      height: 1.875rem;\n      width: 1.875rem;\n      min-height: 1.875rem;\n      min-width: 1.875rem;\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  ix-dropdown {\n    max-width: 100%;\n  }\n\n  .dropdown-visible {\n    --ix-icon-button-color: var(--theme-color-dynamic--hover);\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 1rem;\n  }\n}\n\n\n\n@include host-valid;\n\n@include host-info {\n  .select {\n    border-color: var(--theme-input--border-color--info);\n  }\n\n  .select:hover {\n    border-color: var(--theme-input--border-color--info--hover) !important;\n  }\n\n  .select:active {\n    border-color: var(--theme-input--border-color--info--active) !important;\n  }\n}\n\n@include host-warning {\n  .select {\n    border-color: var(--theme-input--border-color--warning);\n  }\n\n  .select:hover {\n    border-color: var(--theme-input--border-color--warning--hover) !important;\n  }\n\n  .select:active {\n    border-color: var(--theme-input--border-color--warning--active) !important;\n  }\n}\n\n@include host-invalid {\n  .select {\n    border-color: var(--theme-input--border-color--invalid);\n    background-color: var(--theme-input--background--invalid);\n    box-shadow: none;\n  }\n\n  .select:hover {\n    border-color: var(--theme-input--border-color--invalid--hover) !important;\n  }\n\n  .select:active {\n    border-color: var(--theme-input--border-color--invalid--active) !important;\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  iconChevronDownSmall,\n  iconClear,\n  iconPlus,\n} from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\nimport { a11yBoolean } from '../utils/a11y';\nimport { ArrowFocusController } from '../utils/focus';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/input';\nimport { OnListener } from '../utils/listener';\nimport { makeRef } from '../utils/make-ref';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/**\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Select implements IxInputFieldComponent<string | string[]> {\n  @Element() hostElement!: HTMLIxSelectElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * A string that represents the element's name attribute,\n   * containing a name that identifies the element when submitting the form.\n   *\n   * @since 2.6.0\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * A Boolean attribute indicating that an option with a non-empty string value must be selected\n   *\n   * @since 2.6.0\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Label for the select component\n   *\n   * @since 2.6.0\n   */\n  @Prop() label?: string;\n\n  /**\n   * Warning text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() warningText?: string;\n\n  /**\n   * Info text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() infoText?: string;\n\n  /**\n   * Error text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() validText?: string;\n\n  /**\n   * Helper text for the select component\n   *\n   * @since 2.6.0\n   **/\n  @Prop() helperText?: string;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   *\n   * @since 2.6.0\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Current selected value.\n   * This corresponds to the value property of ix-select-items\n   * @since 2.0.0\n   */\n  @Prop({ mutable: true }) value: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Select an option';\n\n  /**\n   * Information inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * The width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\n   *\n   * @since 2.7.0\n   */\n  @Prop() dropdownWidth?: string;\n\n  /**\n   * The maximum width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\n   * By default the maximum width of the dropdown element is set to 100%.\n   *\n   * @since 2.7.0\n   *\n   */\n  @Prop() dropdownMaxWidth?: string;\n\n  /**\n   * Value changed\n   * @since 2.0.0\n   */\n  @Event() valueChange!: EventEmitter<string | string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange!: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem!: EventEmitter<string>;\n\n  /**\n   * Blur input\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() dropdownShow = false;\n  @State() selectedLabels: (string | undefined)[] = [];\n  @State() isDropdownEmpty = false;\n  @State() navigationItem?: DropdownItemWrapper;\n  @State() inputFilterText = '';\n  @State() inputValue = '';\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private readonly dropdownWrapperRef = makeRef<HTMLElement>();\n  private readonly dropdownAnchorRef = makeRef<HTMLElement>();\n  private readonly inputRef = makeRef<HTMLInputElement>();\n\n  private inputElement?: HTMLInputElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n  private customItemsContainerElement?: HTMLDivElement;\n  private addItemElement?: HTMLIxDropdownItemElement;\n  private arrowFocusController?: ArrowFocusController;\n\n  private touched = false;\n\n  private readonly itemObserver = createMutationObserver(() => {\n    if (!this.arrowFocusController) {\n      return;\n    }\n    this.arrowFocusController.items = this.visibleNonShadowItems;\n  });\n  private readonly focusControllerCallbackBind =\n    this.focusDropdownItem.bind(this);\n\n  get nonShadowItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get visibleNonShadowItems() {\n    return this.nonShadowItems.filter(\n      (item) => !item.classList.contains('display-none')\n    );\n  }\n\n  get shadowItems() {\n    return Array.from(\n      this.hostElement.shadowRoot!.querySelectorAll('ix-select-item')\n    );\n  }\n\n  get visibleShadowItems() {\n    return this.shadowItems.filter(\n      (item) => !item.classList.contains('display-none')\n    );\n  }\n\n  get items() {\n    return [...this.nonShadowItems, ...this.shadowItems];\n  }\n\n  get visibleItems() {\n    return this.items.filter(\n      (item) => !item.classList.contains('display-none')\n    );\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.shadowRoot!.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('display-none'));\n  }\n\n  @Watch('value')\n  watchValue(value: string | string[]) {\n    this.value = value;\n    this.updateSelection();\n  }\n\n  @Watch('dropdownShow')\n  watchDropdownShow(show: boolean) {\n    if (show && this.dropdownElement) {\n      this.itemObserver.observe(this.dropdownElement, {\n        childList: true,\n        subtree: true,\n      });\n    } else {\n      this.cleanupResources();\n    }\n  }\n\n  private cleanupResources() {\n    this.arrowFocusController?.disconnect();\n    this.arrowFocusController = undefined;\n    this.itemObserver?.disconnect();\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.itemClick(newId);\n  }\n\n  updateFormInternalValue(value: string | string[]) {\n    if (Array.isArray(value)) {\n      this.formInternals.setFormValue(value.join(','));\n      return;\n    }\n\n    this.formInternals.setFormValue(value);\n  }\n\n  /** @internal */\n  @Method()\n  async hasValidValue(): Promise<boolean> {\n    return this.required && !!this.hasValue();\n  }\n\n  private hasValue() {\n    if (Array.isArray(this.value)) {\n      return !!this.value.length;\n    }\n\n    return !!this.value;\n  }\n\n  private focusDropdownItem(index: number) {\n    this.navigationItem = undefined;\n\n    if (index < this.visibleNonShadowItems.length) {\n      const nestedDropdownItem =\n        this.visibleNonShadowItems[index]?.shadowRoot?.querySelector(\n          'ix-dropdown-item'\n        );\n\n      if (!nestedDropdownItem) {\n        return;\n      }\n\n      requestAnimationFrame(() => {\n        nestedDropdownItem?.shadowRoot?.querySelector('button')?.focus();\n      });\n    }\n  }\n\n  private itemClick(newId: string) {\n    const oldValue = this.value;\n    const value = this.toggleValue(newId);\n    this.value = value;\n    const defaultPrevented = this.emitValueChange(value);\n\n    if (defaultPrevented) {\n      this.value = oldValue;\n      return;\n    }\n\n    this.updateSelection();\n  }\n\n  private emitAddItem(value: string) {\n    if (value === undefined || value.trim() === '') {\n      return false;\n    }\n\n    const { defaultPrevented } = this.addItem.emit(value);\n    if (defaultPrevented) {\n      return true;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.customItemsContainerElement?.appendChild(newItem);\n\n    this.clearInput();\n    this.itemClick(value);\n\n    return false;\n  }\n\n  private toggleValue(itemValue: string) {\n    if (!this.isMultipleMode) {\n      return itemValue;\n    }\n\n    if (!this.value) {\n      return [itemValue];\n    }\n\n    let value = this.value;\n\n    if (!Array.isArray(value)) {\n      value = [value];\n    }\n\n    if (value.includes(itemValue)) {\n      return value.filter((value) => value !== itemValue);\n    } else {\n      return [...value, itemValue];\n    }\n  }\n\n  private updateSelection() {\n    let ids: string[] = [];\n\n    if (this.value) {\n      ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n    }\n\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => {\n        if (typeof i !== typeof item.value) {\n          return i.toString() === item.value.toString();\n        } else {\n          return i === item.value;\n        }\n      });\n    });\n\n    this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n    if (this.selectedLabels?.length && this.isSingleMode) {\n      this.inputValue = this.selectedLabels[0] ?? '';\n    } else {\n      this.inputValue = '';\n    }\n\n    this.inputElement && (this.inputElement.value = this.inputValue);\n  }\n\n  private emitValueChange(value: string | string[]) {\n    const { defaultPrevented } = this.valueChange.emit(value);\n\n    if (defaultPrevented) {\n      return true;\n    }\n\n    this.updateFormInternalValue(value);\n    return false;\n  }\n\n  componentDidLoad() {\n    this.inputElement?.addEventListener('input', () => {\n      this.dropdownShow = true;\n      this.inputChange.emit(this.inputElement?.value);\n    });\n  }\n\n  componentWillLoad() {\n    this.updateSelection();\n    this.updateFormInternalValue(this.value);\n  }\n\n  componentDidRender(): void {\n    if (\n      !this.dropdownShow ||\n      this.arrowFocusController ||\n      !this.dropdownElement\n    ) {\n      return;\n    }\n\n    this.arrowFocusController = new ArrowFocusController(\n      this.visibleNonShadowItems,\n      this.dropdownElement,\n      this.focusControllerCallbackBind\n    );\n\n    this.arrowFocusController.wrap =\n      !this.isAddItemVisible() && !this.visibleShadowItems.length;\n  }\n\n  @Listen('ix-select-item:valueChange')\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.updateSelection();\n  }\n\n  disconnectedCallback() {\n    this.cleanupResources();\n  }\n\n  private itemExists(item: string | undefined) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n\n    if (event.detail) {\n      this.inputElement?.focus();\n      this.inputElement?.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n      this.updateSelection();\n      this.inputFilterText = '';\n    }\n  }\n\n  @OnListener<Select>('keydown', (self) => self.dropdownShow)\n  async onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      await this.onArrowNavigation(event, event.code);\n    }\n\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation(event.target as HTMLIxSelectItemElement);\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation(\n    el: HTMLIxSelectItemElement | HTMLInputElement\n  ) {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    const trimmedInput = this.inputFilterText.trim();\n    const itemLabel = (el as HTMLIxSelectItemElement)?.label;\n    const item = this.itemExists(trimmedInput);\n\n    if (item) {\n      this.itemClick(item.value);\n    } else if (this.editable && !this.itemExists(itemLabel)) {\n      const defaultPrevented = this.emitAddItem(trimmedInput);\n      if (defaultPrevented) {\n        return;\n      }\n    }\n\n    this.dropdownShow = false;\n    this.updateSelection();\n  }\n\n  private async onArrowNavigation(\n    event: KeyboardEvent,\n    key: 'ArrowDown' | 'ArrowUp'\n  ) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.dropdownShow = true;\n\n    if (!this.navigationItem && document.activeElement === this.hostElement) {\n      if (this.visibleItems.length) {\n        this.applyFocusTo(this.visibleItems.shift());\n      } else if (this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      }\n      return;\n    }\n\n    const moveUp = key === 'ArrowUp';\n    const indexNonShadow = document.activeElement\n      ? this.visibleNonShadowItems.indexOf(\n          document.activeElement as HTMLIxSelectItemElement\n        )\n      : -1;\n\n    // Slotted select items\n    if (indexNonShadow === 0) {\n      if (!this.visibleShadowItems.length && this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      } else {\n        this.applyFocusTo(this.visibleShadowItems.pop());\n      }\n      return;\n    } else if (\n      indexNonShadow !== -1 &&\n      indexNonShadow === this.visibleNonShadowItems.length - 1\n    ) {\n      if (this.visibleShadowItems.length) {\n        this.applyFocusTo(this.visibleShadowItems.shift());\n      } else if (this.isAddItemVisible()) {\n        this.focusAddItemButton();\n      }\n      return;\n    }\n\n    if (!this.navigationItem) {\n      return;\n    }\n\n    if (\n      this.isAddItemVisible() &&\n      this.addItemElement?.contains(\n        await this.navigationItem.getDropdownItemElement()\n      )\n    ) {\n      if (moveUp) {\n        this.applyFocusTo(this.visibleItems.pop());\n      } else if (this.visibleItems.length) {\n        this.applyFocusTo(this.visibleItems.shift());\n      }\n      return;\n    }\n\n    // Custom select items\n    const indexShadow = this.visibleShadowItems.indexOf(\n      this.navigationItem as HTMLIxSelectItemElement\n    );\n\n    if (moveUp) {\n      if (indexShadow === 0) {\n        if (this.visibleNonShadowItems.length) {\n          this.applyFocusTo(this.visibleNonShadowItems.pop());\n        } else if (this.isAddItemVisible()) {\n          this.focusAddItemButton();\n        }\n      } else {\n        this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);\n      }\n    } else {\n      if (indexShadow === this.visibleShadowItems.length - 1) {\n        if (this.isAddItemVisible()) {\n          this.focusAddItemButton();\n        } else {\n          this.applyFocusTo(this.visibleItems.shift());\n        }\n      } else {\n        this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);\n      }\n    }\n  }\n\n  private applyFocusTo(element?: HTMLIxSelectItemElement) {\n    if (!element) {\n      return;\n    }\n\n    this.navigationItem = element;\n\n    setTimeout(() => {\n      element.shadowRoot\n        ?.querySelector('ix-dropdown-item')\n        ?.shadowRoot?.querySelector('button')\n        ?.focus();\n    });\n  }\n\n  private focusAddItemButton() {\n    if (this.addItemButton) {\n      this.addItemButton.shadowRoot?.querySelector('button')?.focus();\n      this.navigationItem = this.addItemElement;\n    }\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputElement?.value ?? '';\n\n    if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {\n      return;\n    }\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('display-none');\n        if (\n          !item.label\n            ?.toLowerCase()\n            .includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('display-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    if (this.arrowFocusController) {\n      this.arrowFocusController.items = this.visibleNonShadowItems;\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('display-none');\n    });\n  }\n\n  private clearInput() {\n    if (this.inputElement) {\n      this.inputElement.value = '';\n    }\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.selectedLabels = [];\n    this.value = [];\n    this.emitValueChange([]);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(event: Event) {\n    this.ixBlur.emit();\n    this.touched = true;\n\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      return;\n    }\n\n    const target = event.target as HTMLInputElement;\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      target.value = this.selectedLabels.toString();\n    }\n  }\n\n  private placeholderValue() {\n    if (this.disabled) {\n      return '';\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  @HookValidationLifecycle()\n  onValidationChange({\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isInfo,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n    this.isInfo = isInfo;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /**\n   * Returns the native input element used in the component.\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    if (this.inputElement) {\n      return Promise.resolve(this.inputElement);\n    } else {\n      return Promise.reject(new Error('Input element not found'));\n    }\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    const inputElement = await this.getNativeInputElement();\n    if (inputElement) {\n      inputElement.focus();\n    }\n  }\n\n  /**\n   * Check if the input field has been touched.\n   * @internal\n   * */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={a11yBoolean(this.disabled)}\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <ix-field-wrapper\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <div\n            class={{\n              select: true,\n              disabled: this.disabled,\n              readonly: this.readonly,\n            }}\n            ref={(ref) => {\n              this.dropdownAnchorRef(ref);\n              if (!this.editable) this.dropdownWrapperRef(ref);\n            }}\n          >\n            <div class=\"input-container\">\n              <div class=\"chips\">\n                {this.isMultipleMode\n                  ? this.selectedItems?.map((item) => (\n                      <ix-filter-chip\n                        disabled={this.disabled || this.readonly}\n                        key={item.value}\n                        onCloseClick={(e) => {\n                          e.preventDefault();\n                          e.stopPropagation();\n                          this.itemClick(item.value);\n                        }}\n                      >\n                        {item.label}\n                      </ix-filter-chip>\n                    ))\n                  : ''}\n                <div class=\"trigger\">\n                  <input\n                    autocomplete=\"off\"\n                    data-testid=\"input\"\n                    disabled={this.disabled}\n                    readOnly={this.readonly}\n                    required={this.required}\n                    type=\"text\"\n                    class={{\n                      'allow-clear':\n                        this.allowClear && !!this.selectedLabels?.length,\n                    }}\n                    placeholder={this.placeholderValue()}\n                    value={this.inputValue ?? ''}\n                    ref={(ref) => {\n                      this.inputElement = ref;\n                      this.inputRef(ref);\n                    }}\n                    onBlur={(e) => this.onInputBlur(e)}\n                    onFocus={() => {\n                      this.navigationItem = undefined;\n                    }}\n                    onInput={() => this.filterItemsWithTypeahead()}\n                    onKeyDown={(e) => this.onKeyDown(e)}\n                  />\n                  {this.allowClear &&\n                  !this.disabled &&\n                  !this.readonly &&\n                  (this.selectedLabels?.length || this.inputFilterText) ? (\n                    <ix-icon-button\n                      class=\"clear\"\n                      icon={iconClear}\n                      ghost\n                      oval\n                      size=\"16\"\n                      onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.clear();\n                      }}\n                    />\n                  ) : null}\n                  {this.disabled || this.readonly ? null : (\n                    <ix-icon-button\n                      data-select-dropdown\n                      class={{ 'dropdown-visible': this.dropdownShow }}\n                      icon={iconChevronDownSmall}\n                      ghost\n                      ref={(ref) => {\n                        if (this.editable) this.dropdownWrapperRef(ref);\n                      }}\n                    ></ix-icon-button>\n                  )}\n                </div>\n              </div>\n            </div>\n          </div>\n        </ix-field-wrapper>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownElement = ref!)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'display-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchorRef.waitForCurrent()}\n          trigger={this.dropdownWrapperRef.waitForCurrent()}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            const styleOverwrites: Partial<CSSStyleDeclaration> = {};\n\n            const minWidth = this.hostElement.shadowRoot\n              ?.querySelector('.select')\n              ?.getBoundingClientRect().width;\n\n            if (minWidth) {\n              styleOverwrites.minWidth = `${minWidth}px`;\n            }\n\n            if (this.dropdownWidth) {\n              styleOverwrites.width = `min(${this.dropdownWidth}, 100%)`;\n            }\n\n            if (this.dropdownMaxWidth) {\n              styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;\n            }\n\n            return styleOverwrites;\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n            onClick={(e) => e.preventDefault()}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot\n            onSlotchange={() => {\n              this.updateSelection();\n            }}\n          ></slot>\n          <div ref={(ref) => (this.customItemsContainerElement = ref!)}></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon={iconPlus}\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n              onFocus={() => (this.navigationItem = this.addItemElement)}\n              ref={(ref) => {\n                this.addItemElement = ref!;\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}