@infineon/infineon-design-system-stencil 37.13.1--canary.1987.af4057eae2ab04d5a02dcce99e6921a50cf96f1f.0 → 37.14.0--canary.1964.0cc47e126559ad69071eedaaa2c1137ce976ec2c.0

package/dist/infineon-design-system-stencil/{p-394548d7.entry.js → p-c5023809.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,d as s,a}from"./p-DS8meZSd.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=class{constructor(i){t(this,i);this.ifxTopbarFilterChange=e(this,"ifxTopbarFilterChange",7);this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.showMoreFiltersButton=true;this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="filter-search"]');if(e instanceof HTMLSlotElement){const t=e.assignedElements({flatten:true});t.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=t=>{this.handleTopbarFilterChange(t)};this.handleFilterSelect=t=>{this.handleTopbarFilterChange(t)};this.handleTopbarFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const a=e.findIndex((t=>t.filterName===i));if(a!==-1){e[a].filterValues=[s]}else{e.push({filterName:i,filterValues:[s],type:"text"})}}else if(t.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=t.detail;const l=e.findIndex((t=>t.filterName===i));if(l!==-1){e[l].filterValues=s;e[l].type=a}else{e.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=e;this.ifxTopbarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const t=Math.max(0,this.visibleSlots);const e=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(t,e,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((t,e)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${e+1}`}))));return i(s,{key:"61ff68bcd216de78c9cb8e602a0c458d2e8d8c80"},i("div",{key:"16ad48a609a86177bf091353c2d1e2930f8cd511",class:"search-container"},i("slot",{key:"5cf1d5ee6b7abe44edbd6826eb521ab491b6f621",name:"filter-search"})," "),i("div",{key:"22bf6b2805f8c0a2db88b18905a5216c5091cc31",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"3873323683c5115d92be0735b283e082e052622a",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"3628211cca4ec943829f4964b9f49ae4e9b89ad3",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"c659f861b2223ae50f23dedfe7b1a8d0e52aadba",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};r.style=l;export{r as ifx_filter_bar};
-//# sourceMappingURL=p-394548d7.entry.js.map
+import{r as t,c as e,h as i,d as s,a}from"./p-DS8meZSd.js";const l=":host{display:block;width:100%}.search-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-start;margin-bottom:16px}.components-container{display:flex;width:calc(100% - 48px);padding-left:24px;padding-right:24px;flex-direction:row;align-items:flex-end;align-content:flex-end;flex-wrap:wrap;gap:16px}.filter-slot-wrapper{flex-grow:1;flex-basis:100%;max-width:100%}@media (max-width: 1024px){.more-filters-wrapper{order:3;width:100%;display:flex;justify-content:center;padding-top:16px;}}@media (min-width: 720px) and (max-width: 1024px){.filter-slot-wrapper{flex-basis:calc((100% - 16px) / 2);max-width:calc((100% - 16px) / 2)}}@media (min-width: 1025px){.filter-slot-wrapper{flex-basis:auto;max-width:200px}::slotted([slot=filter-search]){max-width:828px}}::slotted([slot=filter-search]){flex-grow:1;flex-basis:100%;width:100%}";const r=class{constructor(i){t(this,i);this.ifxTopbarFilterChange=e(this,"ifxTopbarFilterChange",7);this.selectedOptions=[];this.showAllFilters=false;this.maxShownFilters=4;this.showMoreFiltersButton=true;this.handleMoreFiltersClick=()=>{this.showAllFilters=true;this.updateVisibleSlots()};this.handleResetEvent=()=>{var t;const e=(t=this.el.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="filter-search"]');if(e instanceof HTMLSlotElement){const t=e.assignedElements({flatten:true});t.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}))}this.selectedOptions=[];this.ifxTopbarFilterChange.emit(this.selectedOptions)};this.handleSearchChange=t=>{this.handleTopbarFilterChange(t)};this.handleFilterSelect=t=>{this.handleTopbarFilterChange(t)};this.handleTopbarFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const a=e.findIndex((t=>t.filterName===i));if(a!==-1){e[a].filterValues=[s]}else{e.push({filterName:i,filterValues:[s],type:"text"})}}else if(t.type==="ifxFilterSelect"){const{filterName:i,filterValues:s,type:a}=t.detail;const l=e.findIndex((t=>t.filterName===i));if(l!==-1){e[l].filterValues=s;e[l].type=a}else{e.push({filterName:i,filterValues:s,type:a})}}this.selectedOptions=e;this.ifxTopbarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillUnload(){this.el.removeEventListener("ifxFilterSelect",this.handleTopbarFilterChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}componentWillLoad(){this.updateVisibleSlots()}updateVisibleSlots(){this.visibleSlots=this.showAllFilters?Number.MAX_SAFE_INTEGER:this.maxShownFilters}render(){const t=Math.max(0,this.visibleSlots);const e=this.el.querySelectorAll("ifx-set-filter").length;const a=Math.min(t,e,Number.MAX_SAFE_INTEGER);const l=Array.from({length:a},((t,e)=>i("div",{class:"filter-slot-wrapper"},i("slot",{name:`filter-component-${e+1}`}))));return i(s,{key:"a5c38e939f37e01b4b9bd531adcd8bfc0fa103f3"},i("div",{key:"ff58d5e75619a978c32b94ffe9b3f25e7297836b",class:"search-container"},i("slot",{key:"4204f7c0f50cddde29bbae89f46695ca1b538b11",name:"filter-search"})," "),i("div",{key:"a46e94e9d62778ba54130c171905115107b384f0",class:"components-container"},l.length>0?l:i("slot",{name:"filter-component"}),this.showMoreFiltersButton&&!this.showAllFilters&&i("div",{key:"ec47849a35717d93d92356c4790162ef21a7ccd4",class:"more-filters-wrapper",onClick:this.handleMoreFiltersClick},i("ifx-button",{key:"d1db69ebf2315b34cf379fd564157ac15835fb3d",type:"button",disabled:false,variant:"tertiary",size:"m",target:"_blank",theme:"default","full-width":"false"},i("ifx-icon",{key:"76e8f0e91441159180ea4345f2ba1b00d5e43119",icon:"filter-16"}),"More filters"))))}get el(){return a(this)}};r.style=l;export{r as ifx_filter_bar};
+//# sourceMappingURL=p-c5023809.entry.js.map

package/dist/infineon-design-system-stencil/{p-b61430f7.entry.js → p-c99cff31.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as e,h as s,a as t}from"./p-DS8meZSd.js";import{d as l,t as a}from"./p-DcmcuUOA.js";import{i as o}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{border:1px solid #0A8276;background:#F7F7F7}.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}';const n=class{constructor(s){i(this,s);this.ifxFileUploadAdd=e(this,"ifxFileUploadAdd",7);this.ifxFileUploadRemove=e(this,"ifxFileUploadRemove",7);this.ifxFileUploadChange=e(this,"ifxFileUploadChange",7);this.ifxFileUploadError=e(this,"ifxFileUploadError",7);this.ifxFileUploadInvalid=e(this,"ifxFileUploadInvalid",7);this.ifxFileUploadStart=e(this,"ifxFileUploadStart",7);this.ifxFileUploadComplete=e(this,"ifxFileUploadComplete",7);this.ifxFileUploadAllComplete=e(this,"ifxFileUploadAllComplete",7);this.ifxFileUploadAbort=e(this,"ifxFileUploadAbort",7);this.ifxFileUploadDrop=e(this,"ifxFileUploadDrop",7);this.ifxFileUploadClick=e(this,"ifxFileUploadClick",7);this.ifxFileUploadMaxFilesExceeded=e(this,"ifxFileUploadMaxFilesExceeded",7);this.ifxFileUploadValidation=e(this,"ifxFileUploadValidation",7);this.ifxFileUploadRetry=e(this,"ifxFileUploadRetry",7);this.dragAndDrop=false;this.required=false;this.disabled=false;this.maxFileSizeMB=7;this.allowedFileTypes=["jpg","jpeg","png","pdf","mov","mp3","mp4"];this.additionalAllowedFileTypes=[];this.label="Label";this.labelRequiredError="At least one file must be uploaded";this.labelBrowseFiles="Browse files";this.labelDragAndDrop="Drag & Drop or browse files to upload";this.labelUploadedFilesHeading="Uploaded files";this.labelFileTooLarge="Upload failed. Max file size: {{size}}MB.";this.labelUnsupportedFileType="Unsupported file type.";this.labelUploaded="Successfully uploaded";this.labelUploadFailed="Upload failed. Please try again.";this.labelSupportedFormatsTemplate="Supported file formats: {{types}}. Max file size: {{size}}MB.";this.labelFileSingular="file";this.labelFilePlural="files";this.labelMaxFilesInfo="Up to {{count}} {{files}}.";this.labelMaxFilesExceeded="Upload limit exceeded. Only {{count}} {{files}} allowed.";this.ariaLabelBrowseFiles="Browse files";this.ariaLabelDropzone="Upload area. Click to browse or drag and drop files.";this.ariaLabelFileInput="Upload file";this.ariaLabelRemoveFile="Remove file";this.ariaLabelCancelUpload="Cancel upload";this.ariaLabelRetryUpload="Retry upload";this.ariaLabelUploadingStatus="Upload in progress";this.ariaLabelUploadedStatus="Upload completed";this.ariaLabelUploadFailedStatus="Upload failed";this.internalId=`ifx-file-upload-${Math.random().toString(36).substr(2,9)}`;this.isDragOver=false;this.files=[];this.uploadTasks=[];this.rejectedSizeFiles=[];this.rejectedTypeFiles=[];this.requiredError=false;this.statusMessage=null;this.fileInputEl=null;this.extensionToMimeMap={jpg:"image/jpeg",jpeg:"image/jpeg",png:"image/png",gif:"image/gif",svg:"image/svg+xml",webp:"image/webp",pdf:"application/pdf",doc:"application/msword",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",xls:"application/vnd.ms-excel",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",ppt:"application/vnd.ms-powerpoint",pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",txt:"text/plain",csv:"text/csv",json:"application/json",mp3:"audio/mpeg",wav:"audio/wav",mp4:"video/mp4",mov:"video/quicktime",webm:"video/webm",zip:"application/zip",rar:"application/vnd.rar",tar:"application/x-tar",gz:"application/gzip",xml:"application/xml",html:"text/html",css:"text/css",js:"application/javascript"}}get maxFiles(){return this._maxFiles}set maxFiles(i){if(typeof i==="number"&&i<1){console.warn("Invalid `maxFiles` value. Must be >= 1. Value ignored.");this._maxFiles=undefined}else{this._maxFiles=i}}validateRequired(){var i,e;if(this.required&&this.files.length===0){this.requiredError=true;if(((i=this.statusMessage)===null||i===void 0?void 0:i.text)!==this.labelRequiredError){this.statusMessage={type:"error",text:this.labelRequiredError}}this.ifxFileUploadValidation.emit({valid:false})}else{this.requiredError=false;if(((e=this.statusMessage)===null||e===void 0?void 0:e.text)===this.labelRequiredError){this.statusMessage=null}this.ifxFileUploadValidation.emit({valid:true})}}pluralize(i){return i===1?this.labelFileSingular:this.labelFilePlural}getNormalizedFileTypes(){if(Array.isArray(this.allowedFileTypes)){return this.allowedFileTypes}try{return JSON.parse(this.allowedFileTypes)}catch(i){return this.allowedFileTypes.split(",").map((i=>i.trim()))}}getLabelFromMimeType(i){for(const[e,s]of Object.entries(this.extensionToMimeMap)){if(s===i){return e.toUpperCase()}}return i}handleFileChange(i){const e=i.target;if(!e.files)return;this.processFiles(e.files)}handleDrop(i){var e;if(this.disabled)return;i.preventDefault();i.stopPropagation();this.isDragOver=false;if((e=i.dataTransfer)===null||e===void 0?void 0:e.files){const e=Array.from(i.dataTransfer.files);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];e.forEach((i=>{const e=s.includes(i.type);const a=i.size<=this.maxFileSizeMB*1024*1024;if(e&&a)t.push(i);else l.push(i)}));this.ifxFileUploadDrop.emit({droppedFiles:e,acceptedFiles:t,rejectedFiles:l});this.processFiles(i.dataTransfer.files)}}handleDragOver(i){if(this.disabled)return;i.preventDefault();this.isDragOver=true}handleDragLeave(i){if(this.disabled)return;i.preventDefault();this.isDragOver=false}processFiles(i){const e=Array.from(i);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];const a=[];e.forEach((i=>{const e=s.includes(i.type);const o=i.size<=this.maxFileSizeMB*1024*1024;const r=this.files.some((e=>e.name===i.name&&e.size===i.size));if(r){this.ifxFileUploadInvalid.emit({file:i,reason:"duplicate"});this.ifxFileUploadError.emit({file:i,errorType:"duplicate",message:`File "${i.name}" is already added`,reason:"duplicate"});return}if(e&&o){t.push(i)}else{if(!e){a.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-type"})}if(!o){l.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-size"})}this.ifxFileUploadError.emit({file:i,errorType:!e?"invalid-type":"file-too-large",message:"Invalid file rejected",reason:!e?"unsupported-type":"file-too-large"})}}));this.rejectedSizeFiles=[...this.rejectedSizeFiles,...l];this.rejectedTypeFiles=[...this.rejectedTypeFiles,...a];if(this.maxFiles&&this.files.length+t.length>this.maxFiles){const i=this.maxFiles-this.files.length;const e=t.slice(0,Math.max(i,0));const s=t.slice(i);this.files=[...this.files,...e];e.forEach((i=>this.startUpload(i)));if(e.length>0){this.ifxFileUploadAdd.emit({addedFiles:e,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}s.forEach((i=>{this.ifxFileUploadInvalid.emit({file:i,reason:"too-many-files"});this.ifxFileUploadError.emit({file:i,errorType:"too-many-files",message:`Upload limit exceeded. Max ${this.maxFiles} files allowed.`,reason:"too-many-files"})}));if(s.length>0){this.statusMessage={type:"error",text:this.labelMaxFilesExceeded.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",this.pluralize(this.maxFiles))};this.ifxFileUploadMaxFilesExceeded.emit({maxFiles:this.maxFiles,attempted:this.files.length+t.length})}return}t.forEach((i=>this.startUpload(i)));this.files=[...this.files,...t];if(t.length>0){this.ifxFileUploadAdd.emit({addedFiles:t,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}this.validateRequired()}retryUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){this.uploadTasks.splice(e,1);this.uploadTasks=[...this.uploadTasks]}this.ifxFileUploadRetry.emit({file:i});this.startUpload(i)}startUpload(i){this.ifxFileUploadStart.emit({file:i});const e={file:i,progress:3,intervalId:null,completed:false};this.uploadTasks=[...this.uploadTasks,e];if(this.uploadHandler){this.uploadHandler(i,(i=>{if(i>e.progress){e.progress=Math.min(100,i);this.uploadTasks=[...this.uploadTasks]}})).then((()=>{e.progress=100;e.completed=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}})).catch((()=>{e.error=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadError.emit({file:i,errorType:"upload-failed",message:"Upload handler rejected file",reason:"custom"})}))}else{const s=i.size;const t=1e5;let l=0;e.intervalId=window.setInterval((()=>{l+=t/5;const a=Math.min(100,Math.round(l/s*100));e.progress=a;this.uploadTasks=[...this.uploadTasks];if(a>=100){clearInterval(e.intervalId);e.completed=true;e.intervalId=null;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}}}),200)}this.uploadTasks=[...this.uploadTasks,e]}cancelUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){const i=this.uploadTasks[e];if((i===null||i===void 0?void 0:i.intervalId)!==null){clearInterval(i.intervalId)}this.uploadTasks=this.uploadTasks.filter(((i,s)=>s!==e))}this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadAbort.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.fileInputEl){this.fileInputEl.value=""}this.validateRequired()}removeFile(i){var e;this.uploadTasks=this.uploadTasks.filter((e=>e.file.name!==i.name));this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadRemove.emit({removedFile:i,files:this.files});this.ifxFileUploadChange.emit({files:this.files});this.validateRequired();if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles&&((e=this.statusMessage)===null||e===void 0?void 0:e.text)!==this.labelRequiredError){this.statusMessage=null}}clearRejectedFile(i,e){if(e==="size"){this.rejectedSizeFiles=this.rejectedSizeFiles.filter((e=>e!==i))}else{this.rejectedTypeFiles=this.rejectedTypeFiles.filter((e=>e!==i))}if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles){this.statusMessage=null}this.validateRequired()}splitFileNameParts(i){const e=i.name;const s=e.lastIndexOf(".");if(s===-1)return{base:e,ext:""};return{base:e.substring(0,s),ext:e.substring(s)}}getFileIcon(i){var e;const s=(e=i.name.split(".").pop())===null||e===void 0?void 0:e.toLowerCase();switch(s){case"pdf":return"file-pdf-16";case"jpg":case"jpeg":return"file-jpg-16";case"png":return"file-png-16";case"mov":return"file-mov-16";case"mp3":return"file-mp3-16";case"mp4":return"file-mp4-16";default:return"file-16"}}formatSize(i){if(i>=1024*1024*1024){return`${(i/(1024*1024*1024)).toFixed(1)} GB`}else if(i>=1024*1024){return`${(i/(1024*1024)).toFixed(1)} MB`}else if(i>=1024){return`${(i/1024).toFixed(0)} KB`}else{return`${i} B`}}getAcceptAttribute(){const i=this.getNormalizedFileTypes().map((i=>"."+i.toLowerCase()));const e=this.getAdditionalMimeTypes();return[...i,...e].join(",")}getFormattedProgressText(i){const e=Math.round(i.progress/100*i.file.size);const s=this.formatSize(e);const t=this.formatSize(i.file.size);return`${s} / ${t} uploaded`}getAdditionalMimeTypes(){if(!this.additionalAllowedFileTypes)return[];if(Array.isArray(this.additionalAllowedFileTypes))return this.additionalAllowedFileTypes;return this.additionalAllowedFileTypes.split(",").map((i=>i.trim()))}getSupportedFileText(){const i=this.getNormalizedFileTypes().map((i=>i.toUpperCase()));const e=this.getAdditionalMimeTypes().map((i=>this.getLabelFromMimeType(i)));const s=[...i,...e];const t=s.join(", ");let l=this.labelSupportedFormatsTemplate.replace("{{types}}",t).replace("{{size}}",this.maxFileSizeMB.toString());if(this.labelMaxFilesInfo&&this.maxFiles){const i=this.pluralize(this.maxFiles);const e=this.labelMaxFilesInfo.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",i);l+=` ${e}`}return l}getFormattedFileTooLargeText(){return this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())}renderStatusMessage(){if(!this.statusMessage)return null;return s("div",{class:`file-upload-status file-upload-status__${this.statusMessage.type}`},this.statusMessage.type==="error"&&s("ifx-icon",{icon:"c-warning-16"}),this.statusMessage.text)}isInputDisabled(){return this.disabled||this.maxFiles!==undefined&&this.files.length>=this.maxFiles}async componentDidLoad(){if(!o(this.hostElement)){const i=l();a("ifx-file-upload",await i)}if(this.hostElement.hasAttribute("show-demo-states")){this.showDemoStates=true}if(this.showDemoStates){this.injectDemoState()}}async injectDemoState(){const i=new Array(5e4).fill("a").join("");const e=i+i;const s=new File([i],"Image.jpg",{type:"image/jpeg"});const t=new File([e],"File.pdf",{type:"application/pdf"});const l=new File([i],"Text.docx",{type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});const a=new File([e+e+e],"Video.mp4",{type:"video/mp4"});const o=new File(["demo"],"Script.exe",{type:"application/x-msdownload"});this.files=[t,s,l];this.uploadTasks=[{file:t,progress:100,intervalId:null,completed:true},{file:s,progress:40,intervalId:null,completed:false},{file:l,progress:80,intervalId:null,completed:false,error:true}];this.rejectedSizeFiles=[a.name];this.rejectedTypeFiles=[o.name]}async triggerDemoValidation(){this.validateRequired()}render(){return s("div",{key:"f98ff0d0152f1b8f2d7a96f4b4860a9836398dfe",class:{"file-upload-wrapper":true,disabled:this.disabled}},this.label&&s("label",{key:"2639246e2dc34728aa25c44ba7a9c4786f56552c",class:"file-upload-label",htmlFor:this.internalId},this.label,this.required&&s("span",{key:"2b0a0e62e815f75b5a2e5d7ac886a809ad46d031",class:`required ${this.requiredError?"error":""}`},"*")),this.dragAndDrop?this.renderDragAndDropArea():this.renderUploadArea(),(this.files.length>0||this.rejectedSizeFiles.length>0||this.rejectedTypeFiles.length>0)&&s("div",{key:"d32153fac7ad16ed56ca6d388032883ba31355ea",class:"file-list-wrapper"},s("div",{key:"b3f72dc0e9b46933b192f31a98dd6eb2d3778bef",class:"upload-heading"},this.labelUploadedFilesHeading),s("ul",{key:"23b8539f0d7d38a9c434d95a10eee392d57b2b23",class:"file-list"},this.rejectedSizeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-size-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"size")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())},this.getFormattedFileTooLargeText())))))),this.rejectedTypeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-type-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"type")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelUnsupportedFileType},this.labelUnsupportedFileType)))))),this.files.map((i=>{var e;const t=this.uploadTasks.find((e=>e.file.name===i.name));const l=(e=t===null||t===void 0?void 0:t.progress)!==null&&e!==void 0?e:100;const a=t&&!t.completed;const o=(t===null||t===void 0?void 0:t.error)===true;const r=o?"file-item upload-failed":a?"file-item uploading":"file-item upload-success";const n=`${i.name}-${i.size}`;const{base:h,ext:d}=this.splitFileNameParts(i);return s("li",{class:r,key:n},s("div",{class:"file-icon"},s("ifx-icon",{icon:this.getFileIcon(i)})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},h),s("span",{class:"file-name-ext"},d)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"refresh-16",size:"s","aria-label":this.ariaLabelRetryUpload,onClick:()=>this.retryUpload(i),style:{display:o?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"cross-16",size:"s","aria-label":this.ariaLabelCancelUpload,onClick:()=>this.cancelUpload(i),style:{display:a?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.removeFile(i),style:{display:!a?"inline-flex":"none"}}))),s("div",{class:"file-middle-row"},a&&t&&!t.error&&s("span",{class:"file-uploading","aria-label":this.ariaLabelUploadingStatus},this.getFormattedProgressText(t)),!a&&!o&&s("span",null,s("span",{class:"file-size"},this.formatSize(i.size)),s("span",{class:"file-status","aria-label":this.ariaLabelUploadedStatus},s("ifx-icon",{icon:"check-16"}),this.labelUploaded)),o&&s("span",{class:"file-status","aria-label":this.ariaLabelUploadFailedStatus},this.labelUploadFailed)),a&&t&&!t.error&&s("div",{class:"file-progress-row"},s("ifx-progress-bar",{size:"s",value:l,"show-label":"true"}))))})))))}renderUploadArea(){const i=i=>{this.fileInputEl=i};return s("div",{class:{"upload-button":true}},s("ifx-button",{variant:"secondary",onClick:()=>{var i;return(i=this.fileInputEl)===null||i===void 0?void 0:i.click()},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelBrowseFiles},s("ifx-icon",{icon:"upload-16"}),this.labelBrowseFiles),s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),style:{display:"none"},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}),s("p",{class:"file-upload-info"},this.getSupportedFileText()),this.renderStatusMessage())}renderDragAndDropArea(){const i=i=>{this.fileInputEl=i};const e=()=>{if(this.fileInputEl){this.fileInputEl.click()}};return s("div",{class:{disabled:this.isInputDisabled()}},s("div",{class:{"upload-dropzone":true,"drag-over":this.isDragOver,error:this.requiredError},onClick:e,onDragOver:i=>this.handleDragOver(i),onDragLeave:i=>this.handleDragLeave(i),onDrop:i=>this.handleDrop(i),role:"button",tabIndex:0,"aria-label":this.ariaLabelDropzone},s("ifx-icon",{icon:"upload-16",class:"custom-icon"}),s("p",null,this.labelDragAndDrop),s("p",{class:"file-upload-info"},this.getSupportedFileText()),s("div",{style:{height:"0px",overflow:"hidden"}},s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}))),this.renderStatusMessage())}get hostElement(){return t(this)}};n.style=r;export{n as ifx_file_upload};
-//# sourceMappingURL=p-b61430f7.entry.js.map
+import{r as i,c as e,h as s,a as t}from"./p-DS8meZSd.js";import{d as l,t as a}from"./p-DcmcuUOA.js";import{i as o}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{border:1px solid #0A8276;background:#F7F7F7}.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}';const n=class{constructor(s){i(this,s);this.ifxFileUploadAdd=e(this,"ifxFileUploadAdd",7);this.ifxFileUploadRemove=e(this,"ifxFileUploadRemove",7);this.ifxFileUploadChange=e(this,"ifxFileUploadChange",7);this.ifxFileUploadError=e(this,"ifxFileUploadError",7);this.ifxFileUploadInvalid=e(this,"ifxFileUploadInvalid",7);this.ifxFileUploadStart=e(this,"ifxFileUploadStart",7);this.ifxFileUploadComplete=e(this,"ifxFileUploadComplete",7);this.ifxFileUploadAllComplete=e(this,"ifxFileUploadAllComplete",7);this.ifxFileUploadAbort=e(this,"ifxFileUploadAbort",7);this.ifxFileUploadDrop=e(this,"ifxFileUploadDrop",7);this.ifxFileUploadClick=e(this,"ifxFileUploadClick",7);this.ifxFileUploadMaxFilesExceeded=e(this,"ifxFileUploadMaxFilesExceeded",7);this.ifxFileUploadValidation=e(this,"ifxFileUploadValidation",7);this.ifxFileUploadRetry=e(this,"ifxFileUploadRetry",7);this.dragAndDrop=false;this.required=false;this.disabled=false;this.maxFileSizeMB=7;this.allowedFileTypes=["jpg","jpeg","png","pdf","mov","mp3","mp4"];this.additionalAllowedFileTypes=[];this.label="Label";this.labelRequiredError="At least one file must be uploaded";this.labelBrowseFiles="Browse files";this.labelDragAndDrop="Drag & Drop or browse files to upload";this.labelUploadedFilesHeading="Uploaded files";this.labelFileTooLarge="Upload failed. Max file size: {{size}}MB.";this.labelUnsupportedFileType="Unsupported file type.";this.labelUploaded="Successfully uploaded";this.labelUploadFailed="Upload failed. Please try again.";this.labelSupportedFormatsTemplate="Supported file formats: {{types}}. Max file size: {{size}}MB.";this.labelFileSingular="file";this.labelFilePlural="files";this.labelMaxFilesInfo="Up to {{count}} {{files}}.";this.labelMaxFilesExceeded="Upload limit exceeded. Only {{count}} {{files}} allowed.";this.ariaLabelBrowseFiles="Browse files";this.ariaLabelDropzone="Upload area. Click to browse or drag and drop files.";this.ariaLabelFileInput="Upload file";this.ariaLabelRemoveFile="Remove file";this.ariaLabelCancelUpload="Cancel upload";this.ariaLabelRetryUpload="Retry upload";this.ariaLabelUploadingStatus="Upload in progress";this.ariaLabelUploadedStatus="Upload completed";this.ariaLabelUploadFailedStatus="Upload failed";this.internalId=`ifx-file-upload-${Math.random().toString(36).substr(2,9)}`;this.isDragOver=false;this.files=[];this.uploadTasks=[];this.rejectedSizeFiles=[];this.rejectedTypeFiles=[];this.requiredError=false;this.statusMessage=null;this.fileInputEl=null;this.extensionToMimeMap={jpg:"image/jpeg",jpeg:"image/jpeg",png:"image/png",gif:"image/gif",svg:"image/svg+xml",webp:"image/webp",pdf:"application/pdf",doc:"application/msword",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",xls:"application/vnd.ms-excel",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",ppt:"application/vnd.ms-powerpoint",pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",txt:"text/plain",csv:"text/csv",json:"application/json",mp3:"audio/mpeg",wav:"audio/wav",mp4:"video/mp4",mov:"video/quicktime",webm:"video/webm",zip:"application/zip",rar:"application/vnd.rar",tar:"application/x-tar",gz:"application/gzip",xml:"application/xml",html:"text/html",css:"text/css",js:"application/javascript"}}get maxFiles(){return this._maxFiles}set maxFiles(i){if(typeof i==="number"&&i<1){console.warn("Invalid `maxFiles` value. Must be >= 1. Value ignored.");this._maxFiles=undefined}else{this._maxFiles=i}}validateRequired(){var i,e;if(this.required&&this.files.length===0){this.requiredError=true;if(((i=this.statusMessage)===null||i===void 0?void 0:i.text)!==this.labelRequiredError){this.statusMessage={type:"error",text:this.labelRequiredError}}this.ifxFileUploadValidation.emit({valid:false})}else{this.requiredError=false;if(((e=this.statusMessage)===null||e===void 0?void 0:e.text)===this.labelRequiredError){this.statusMessage=null}this.ifxFileUploadValidation.emit({valid:true})}}pluralize(i){return i===1?this.labelFileSingular:this.labelFilePlural}getNormalizedFileTypes(){if(Array.isArray(this.allowedFileTypes)){return this.allowedFileTypes}try{return JSON.parse(this.allowedFileTypes)}catch(i){return this.allowedFileTypes.split(",").map((i=>i.trim()))}}getLabelFromMimeType(i){for(const[e,s]of Object.entries(this.extensionToMimeMap)){if(s===i){return e.toUpperCase()}}return i}handleFileChange(i){const e=i.target;if(!e.files)return;this.processFiles(e.files)}handleDrop(i){var e;if(this.disabled)return;i.preventDefault();i.stopPropagation();this.isDragOver=false;if((e=i.dataTransfer)===null||e===void 0?void 0:e.files){const e=Array.from(i.dataTransfer.files);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];e.forEach((i=>{const e=s.includes(i.type);const a=i.size<=this.maxFileSizeMB*1024*1024;if(e&&a)t.push(i);else l.push(i)}));this.ifxFileUploadDrop.emit({droppedFiles:e,acceptedFiles:t,rejectedFiles:l});this.processFiles(i.dataTransfer.files)}}handleDragOver(i){if(this.disabled)return;i.preventDefault();this.isDragOver=true}handleDragLeave(i){if(this.disabled)return;i.preventDefault();this.isDragOver=false}processFiles(i){const e=Array.from(i);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];const a=[];e.forEach((i=>{const e=s.includes(i.type);const o=i.size<=this.maxFileSizeMB*1024*1024;const r=this.files.some((e=>e.name===i.name&&e.size===i.size));if(r){this.ifxFileUploadInvalid.emit({file:i,reason:"duplicate"});this.ifxFileUploadError.emit({file:i,errorType:"duplicate",message:`File "${i.name}" is already added`,reason:"duplicate"});return}if(e&&o){t.push(i)}else{if(!e){a.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-type"})}if(!o){l.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-size"})}this.ifxFileUploadError.emit({file:i,errorType:!e?"invalid-type":"file-too-large",message:"Invalid file rejected",reason:!e?"unsupported-type":"file-too-large"})}}));this.rejectedSizeFiles=[...this.rejectedSizeFiles,...l];this.rejectedTypeFiles=[...this.rejectedTypeFiles,...a];if(this.maxFiles&&this.files.length+t.length>this.maxFiles){const i=this.maxFiles-this.files.length;const e=t.slice(0,Math.max(i,0));const s=t.slice(i);this.files=[...this.files,...e];e.forEach((i=>this.startUpload(i)));if(e.length>0){this.ifxFileUploadAdd.emit({addedFiles:e,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}s.forEach((i=>{this.ifxFileUploadInvalid.emit({file:i,reason:"too-many-files"});this.ifxFileUploadError.emit({file:i,errorType:"too-many-files",message:`Upload limit exceeded. Max ${this.maxFiles} files allowed.`,reason:"too-many-files"})}));if(s.length>0){this.statusMessage={type:"error",text:this.labelMaxFilesExceeded.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",this.pluralize(this.maxFiles))};this.ifxFileUploadMaxFilesExceeded.emit({maxFiles:this.maxFiles,attempted:this.files.length+t.length})}return}t.forEach((i=>this.startUpload(i)));this.files=[...this.files,...t];if(t.length>0){this.ifxFileUploadAdd.emit({addedFiles:t,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}this.validateRequired()}retryUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){this.uploadTasks.splice(e,1);this.uploadTasks=[...this.uploadTasks]}this.ifxFileUploadRetry.emit({file:i});this.startUpload(i)}startUpload(i){this.ifxFileUploadStart.emit({file:i});const e={file:i,progress:3,intervalId:null,completed:false};this.uploadTasks=[...this.uploadTasks,e];if(this.uploadHandler){this.uploadHandler(i,(i=>{if(i>e.progress){e.progress=Math.min(100,i);this.uploadTasks=[...this.uploadTasks]}})).then((()=>{e.progress=100;e.completed=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}})).catch((()=>{e.error=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadError.emit({file:i,errorType:"upload-failed",message:"Upload handler rejected file",reason:"custom"})}))}else{const s=i.size;const t=1e5;let l=0;e.intervalId=window.setInterval((()=>{l+=t/5;const a=Math.min(100,Math.round(l/s*100));e.progress=a;this.uploadTasks=[...this.uploadTasks];if(a>=100){clearInterval(e.intervalId);e.completed=true;e.intervalId=null;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}}}),200)}this.uploadTasks=[...this.uploadTasks,e]}cancelUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){const i=this.uploadTasks[e];if((i===null||i===void 0?void 0:i.intervalId)!==null){clearInterval(i.intervalId)}this.uploadTasks=this.uploadTasks.filter(((i,s)=>s!==e))}this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadAbort.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.fileInputEl){this.fileInputEl.value=""}this.validateRequired()}removeFile(i){var e;this.uploadTasks=this.uploadTasks.filter((e=>e.file.name!==i.name));this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadRemove.emit({removedFile:i,files:this.files});this.ifxFileUploadChange.emit({files:this.files});this.validateRequired();if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles&&((e=this.statusMessage)===null||e===void 0?void 0:e.text)!==this.labelRequiredError){this.statusMessage=null}}clearRejectedFile(i,e){if(e==="size"){this.rejectedSizeFiles=this.rejectedSizeFiles.filter((e=>e!==i))}else{this.rejectedTypeFiles=this.rejectedTypeFiles.filter((e=>e!==i))}if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles){this.statusMessage=null}this.validateRequired()}splitFileNameParts(i){const e=i.name;const s=e.lastIndexOf(".");if(s===-1)return{base:e,ext:""};return{base:e.substring(0,s),ext:e.substring(s)}}getFileIcon(i){var e;const s=(e=i.name.split(".").pop())===null||e===void 0?void 0:e.toLowerCase();switch(s){case"pdf":return"file-pdf-16";case"jpg":case"jpeg":return"file-jpg-16";case"png":return"file-png-16";case"mov":return"file-mov-16";case"mp3":return"file-mp3-16";case"mp4":return"file-mp4-16";default:return"file-16"}}formatSize(i){if(i>=1024*1024*1024){return`${(i/(1024*1024*1024)).toFixed(1)} GB`}else if(i>=1024*1024){return`${(i/(1024*1024)).toFixed(1)} MB`}else if(i>=1024){return`${(i/1024).toFixed(0)} KB`}else{return`${i} B`}}getAcceptAttribute(){const i=this.getNormalizedFileTypes().map((i=>"."+i.toLowerCase()));const e=this.getAdditionalMimeTypes();return[...i,...e].join(",")}getFormattedProgressText(i){const e=Math.round(i.progress/100*i.file.size);const s=this.formatSize(e);const t=this.formatSize(i.file.size);return`${s} / ${t} uploaded`}getAdditionalMimeTypes(){if(!this.additionalAllowedFileTypes)return[];if(Array.isArray(this.additionalAllowedFileTypes))return this.additionalAllowedFileTypes;return this.additionalAllowedFileTypes.split(",").map((i=>i.trim()))}getSupportedFileText(){const i=this.getNormalizedFileTypes().map((i=>i.toUpperCase()));const e=this.getAdditionalMimeTypes().map((i=>this.getLabelFromMimeType(i)));const s=[...i,...e];const t=s.join(", ");let l=this.labelSupportedFormatsTemplate.replace("{{types}}",t).replace("{{size}}",this.maxFileSizeMB.toString());if(this.labelMaxFilesInfo&&this.maxFiles){const i=this.pluralize(this.maxFiles);const e=this.labelMaxFilesInfo.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",i);l+=` ${e}`}return l}getFormattedFileTooLargeText(){return this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())}renderStatusMessage(){if(!this.statusMessage)return null;return s("div",{class:`file-upload-status file-upload-status__${this.statusMessage.type}`},this.statusMessage.type==="error"&&s("ifx-icon",{icon:"c-warning-16"}),this.statusMessage.text)}isInputDisabled(){return this.disabled||this.maxFiles!==undefined&&this.files.length>=this.maxFiles}async componentDidLoad(){if(!o(this.hostElement)){const i=l();a("ifx-file-upload",await i)}if(this.hostElement.hasAttribute("show-demo-states")){this.showDemoStates=true}if(this.showDemoStates){this.injectDemoState()}}async injectDemoState(){const i=new Array(5e4).fill("a").join("");const e=i+i;const s=new File([i],"Image.jpg",{type:"image/jpeg"});const t=new File([e],"File.pdf",{type:"application/pdf"});const l=new File([i],"Text.docx",{type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});const a=new File([e+e+e],"Video.mp4",{type:"video/mp4"});const o=new File(["demo"],"Script.exe",{type:"application/x-msdownload"});this.files=[t,s,l];this.uploadTasks=[{file:t,progress:100,intervalId:null,completed:true},{file:s,progress:40,intervalId:null,completed:false},{file:l,progress:80,intervalId:null,completed:false,error:true}];this.rejectedSizeFiles=[a.name];this.rejectedTypeFiles=[o.name]}async triggerDemoValidation(){this.validateRequired()}render(){return s("div",{key:"a9c4a10c01edc59bf813a36a1f85089c9faccf35",class:{"file-upload-wrapper":true,disabled:this.disabled}},this.label&&s("label",{key:"fc3a2355b92484d1b982543a8f903851c26b1f28",class:"file-upload-label",htmlFor:this.internalId},this.label,this.required&&s("span",{key:"a96f3831f78f3abb93b14d01da217605fcfb6a70",class:`required ${this.requiredError?"error":""}`},"*")),this.dragAndDrop?this.renderDragAndDropArea():this.renderUploadArea(),(this.files.length>0||this.rejectedSizeFiles.length>0||this.rejectedTypeFiles.length>0)&&s("div",{key:"f1da149a567293cd240803143eab9b9f63284e6e",class:"file-list-wrapper"},s("div",{key:"71e7e08590902b2b7d0d5a49268f09842e232e9a",class:"upload-heading"},this.labelUploadedFilesHeading),s("ul",{key:"456f8f6a96347028042786515deb7ee2842184ae",class:"file-list"},this.rejectedSizeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-size-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"size")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())},this.getFormattedFileTooLargeText())))))),this.rejectedTypeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-type-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"type")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelUnsupportedFileType},this.labelUnsupportedFileType)))))),this.files.map((i=>{var e;const t=this.uploadTasks.find((e=>e.file.name===i.name));const l=(e=t===null||t===void 0?void 0:t.progress)!==null&&e!==void 0?e:100;const a=t&&!t.completed;const o=(t===null||t===void 0?void 0:t.error)===true;const r=o?"file-item upload-failed":a?"file-item uploading":"file-item upload-success";const n=`${i.name}-${i.size}`;const{base:h,ext:p}=this.splitFileNameParts(i);return s("li",{class:r,key:n},s("div",{class:"file-icon"},s("ifx-icon",{icon:this.getFileIcon(i)})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},h),s("span",{class:"file-name-ext"},p)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"refresh-16",size:"s","aria-label":this.ariaLabelRetryUpload,onClick:()=>this.retryUpload(i),style:{display:o?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"cross-16",size:"s","aria-label":this.ariaLabelCancelUpload,onClick:()=>this.cancelUpload(i),style:{display:a?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.removeFile(i),style:{display:!a?"inline-flex":"none"}}))),s("div",{class:"file-middle-row"},a&&t&&!t.error&&s("span",{class:"file-uploading","aria-label":this.ariaLabelUploadingStatus},this.getFormattedProgressText(t)),!a&&!o&&s("span",null,s("span",{class:"file-size"},this.formatSize(i.size)),s("span",{class:"file-status","aria-label":this.ariaLabelUploadedStatus},s("ifx-icon",{icon:"check-16"}),this.labelUploaded)),o&&s("span",{class:"file-status","aria-label":this.ariaLabelUploadFailedStatus},this.labelUploadFailed)),a&&t&&!t.error&&s("div",{class:"file-progress-row"},s("ifx-progress-bar",{size:"s",value:l,"show-label":"true"}))))})))))}renderUploadArea(){const i=i=>{this.fileInputEl=i};return s("div",{class:{"upload-button":true}},s("ifx-button",{variant:"secondary",onClick:()=>{var i;return(i=this.fileInputEl)===null||i===void 0?void 0:i.click()},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelBrowseFiles},s("ifx-icon",{icon:"upload-16"}),this.labelBrowseFiles),s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),style:{display:"none"},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}),s("p",{class:"file-upload-info"},this.getSupportedFileText()),this.renderStatusMessage())}renderDragAndDropArea(){const i=i=>{this.fileInputEl=i};const e=()=>{if(this.fileInputEl){this.fileInputEl.click()}};return s("div",{class:{disabled:this.isInputDisabled()}},s("div",{class:{"upload-dropzone":true,"drag-over":this.isDragOver,error:this.requiredError},onClick:e,onDragOver:i=>this.handleDragOver(i),onDragLeave:i=>this.handleDragLeave(i),onDrop:i=>this.handleDrop(i),role:"button",tabIndex:0,"aria-label":this.ariaLabelDropzone},s("ifx-icon",{icon:"upload-16",class:"custom-icon"}),s("p",null,this.labelDragAndDrop),s("p",{class:"file-upload-info"},this.getSupportedFileText()),s("div",{style:{height:"0px",overflow:"hidden"}},s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}))),this.renderStatusMessage())}get hostElement(){return t(this)}};n.style=r;export{n as ifx_file_upload};
+//# sourceMappingURL=p-c99cff31.entry.js.map

package/dist/infineon-design-system-stencil/{p-a10a1d46.entry.js → p-cead5ccf.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as a,h as t,a as s}from"./p-DS8meZSd.js";import{d as i,t as l}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";const d=':host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}';const f=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.handleSlotRef=e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}async componentDidLoad(){if(!r(this.el)){const e=i();l("ifx-tree-view",await e)}}render(){return t("div",{key:"2416bba6c7a463c881349da1040cf63634ee75d5",class:`tree-view ${this.disableAllItems?" tree-view--disabled":""}`,role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"84f4d5a8610fd7c92059b3e04c99b92271bcf5df",class:"tree-view__label"},this.label),t("slot",{key:"2adfecbdcf546603e8da93a30db53f3d5ca7f5e1",ref:this.handleSlotRef}))}get el(){return s(this)}static get watchers(){return{expandAllItems:["handleExpandAllItemsChange"],disableAllItems:["handleDisableAllItemsChange"]}}};f.style=d;export{f as ifx_tree_view};
-//# sourceMappingURL=p-a10a1d46.entry.js.map
+import{r as e,c as a,h as t,a as s}from"./p-DS8meZSd.js";import{d as i,t as l}from"./p-DcmcuUOA.js";import{i as r}from"./p-Bw2fh5LT.js";const n=':host{display:block}.tree-view{font-family:var(--ifx-font-family, sans-serif);font-size:14px;color:var(--ifx-color-text, #1a1a1a);display:flex;flex-wrap:wrap;flex-direction:column;overflow-x:auto;overflow-y:hidden}.tree-view__label{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}';const o=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.handleSlotRef=e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}async componentDidLoad(){if(!r(this.el)){const e=i();l("ifx-tree-view",await e)}}render(){return t("div",{key:"91cbeb69981f41ca69eafddb29b051dc3ac261b7",class:`tree-view ${this.disableAllItems?" tree-view--disabled":""}`,role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"e3e2357f117573fc80808e05c1267591bc83ba77",class:"tree-view__label"},this.label),t("slot",{key:"9183d311c318b6caab5a4e873bc3946974aad3cf",ref:this.handleSlotRef}))}get el(){return s(this)}static get watchers(){return{expandAllItems:["handleExpandAllItemsChange"],disableAllItems:["handleDisableAllItemsChange"]}}};o.style=n;export{o as ifx_tree_view};
+//# sourceMappingURL=p-cead5ccf.entry.js.map

package/dist/infineon-design-system-stencil/{p-633ca789.entry.js → p-d3501865.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as r,h as o,a as i}from"./p-DS8meZSd.js";import{d as e,t as a}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family);outline:none}.radioButton__container:focus .radioButton__wrapper::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const s=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}async componentDidLoad(){if(!n(this.el)){const t=e();a("ifx-radio-button",await t)}}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"70a3fcd52e6e216c89ab477df26405f77d4d56be",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"9cd248817e1ceccae7cbd23fce48116054b9d0c6",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"03f787f6a6e124a4d4ae4059401bc47c91c0b79e",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"372a031591d76cfba685bfd0519fbf5f8332701b",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"72ff42a1a482e8003829b56b4b40f216e32a9fb9"})),o("input",{key:"70e8526b7498b94e21e06eb33c21766c29af6804",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};s.style=d;export{s as ifx_radio_button};
-//# sourceMappingURL=p-633ca789.entry.js.map
+import{r as t,c as r,h as o,a as i}from"./p-DS8meZSd.js";import{d as e,t as a}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family);outline:none}.radioButton__container:focus .radioButton__wrapper::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.disabled.error:hover,.radioButton__container .radioButton__wrapper.disabled.error:focus-visible{border-color:#CD002F}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .radioButton__wrapper.checked.disabled{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled.disabled::after{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.disabled .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container .radioButton__wrapper.checked.error::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled){border-color:#CD002F}.radioButton__container .radioButton__wrapper.error:not(.disabled):hover,.radioButton__container .radioButton__wrapper.error:not(.disabled):focus-visible{border-color:#CD002F}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.radioButton__container .label.disabled{color:#BFBBBB}.radioButton__container .label:hover{cursor:pointer}';const s=class{constructor(o){t(this,o);this.ifxChange=r(this,"ifxChange",7);this.ifxError=r(this,"ifxError",7);this.disabled=false;this.error=false;this.size="s";this.internalChecked=false;this.hasSlot=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.fallbackInput=document.createElement("input");this.fallbackInput.type="radio";this.fallbackInput.hidden=true;this.fallbackInput.className="_ifx-radiobutton-fallback";this.fallbackInput.style.cssText=`\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;this.fallbackInput.setAttribute("aria-hidden","true");this.fallbackInput.tabIndex=-1;this.el.appendChild(this.fallbackInput);if("attachInternals"in HTMLElement.prototype){try{this.internals=this.el.attachInternals()}catch(t){console.warn("ElementInternals not supported")}}this.internalChecked=this.checked||false;this.hasSlot=!!this.el.querySelector("[slot]")||this.el.innerHTML.trim()!==""}async componentDidLoad(){if(!n(this.el)){const t=e();a("ifx-radio-button",await t)}}handleCheckedChange(t){this.internalChecked=t}updateFormValue(){var t;if((t=this.internals)===null||t===void 0?void 0:t.setFormValue){this.internals.setFormValue(this.internalChecked?this.value:null)}this.fallbackInput.checked=this.internalChecked;this.fallbackInput.name=this.name;this.fallbackInput.value=this.value;this.fallbackInput.disabled=this.disabled}errorChanged(t,r){if(t!==r){this.ifxError.emit(t)}}handleRadioButtonClick(t){if(this.disabled){t.stopPropagation();return}this.inputElement.click();this.internalChecked=this.inputElement.checked;this.checked=this.internalChecked;this.ifxChange.emit(this.internalChecked);const r=new CustomEvent("change",{bubbles:true,composed:true,detail:{checked:this.internalChecked}});this.el.dispatchEvent(r)}handleKeyDown(t){if([" ","Enter"].includes(t.key)){t.preventDefault();this.handleRadioButtonClick(new PointerEvent("click"))}}handleExternalChange(t){const r=t.target;if(r===this.el||r.tagName.toLowerCase()!=="ifx-radio-button")return;if(r.getAttribute("name")===this.name){this.internalChecked=false}}render(){return o("div",{key:"672fd8be8a134e481c7f4251b95a0978fa3d934e",role:"radio","aria-checked":String(this.internalChecked),"aria-disabled":String(this.disabled),class:`radioButton__container ${this.size} ${this.disabled?"disabled":""}`,onClick:t=>this.handleRadioButtonClick(t),tabindex:this.disabled?-1:0},o("div",{key:"33e9862f00b7544eb320f43e5763edb44242c299",class:`radioButton__wrapper \n            ${this.internalChecked?"checked":""} \n            ${this.disabled?"disabled":""} \n            ${this.error?"error":""}`},this.internalChecked&&o("div",{key:"b2e090f994f231c55fabaa55fa7f7bf0790c92af",class:"radioButton__wrapper-mark"})),this.hasSlot&&o("div",{key:"b3b0f595a56ff3fb5f43f3d4fee7065a13932a3e",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""}`},o("slot",{key:"6f235a7af0381d4dfcc15a80a32604ed4843eb89"})),o("input",{key:"d0c2bf2a3f1471221887fe4046760b9ebf9ce300",type:"radio",hidden:true,ref:t=>this.inputElement=t,name:this.name,value:this.value,checked:this.internalChecked,disabled:this.disabled,onClick:t=>t.stopPropagation()}))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{checked:["handleCheckedChange"],internalChecked:["updateFormValue"],error:["errorChanged"]}}};s.style=d;export{s as ifx_radio_button};
+//# sourceMappingURL=p-d3501865.entry.js.map

package/dist/infineon-design-system-stencil/{p-4d2dfb65.entry.js → p-d77af62a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as t,a as s}from"./p-DS8meZSd.js";import{d as a,t as n}from"./p-DcmcuUOA.js";import{i as l}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const c=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const s=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(s)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const s=t.shadowRoot.querySelector(".chip-item");if(s){setTimeout((()=>{s.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size==="small"?"small":"large",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}async componentDidLoad(){if(!l(this.chip)){const e=a();n("ifx-chip",await e)}}render(){return t("div",{key:"c91add8c4af1fa4ec84184992969deefa67d3feb",class:"chip"},t("div",{key:"cc35edda151d00c7a7670859806f9678057d941e",class:`chip__wrapper chip__wrapper--${this.size==="small"?"small":"large"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}`,tabIndex:0,onClick:!this.readOnly?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.ariaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},t("div",{key:"a9c1790c753340227ee88a059f63d9c260705eb8",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"4d797db98446a87c02944bd7650445d78f637e5d",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-indicator",{key:"9a3576fa06fbcac135b20a0ba2337832b168d28a",variant:"number",number:this.selectedOptions.length-2})),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"678d1ba8227d543feb3da142d78e3c4bc5de1b32",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevron-down-16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"d4856bfa3359a008797712a9391281303edb0dd8",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"059b498f687e043e70e1194de3d1c1a3a124409e",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"628c7180e6f8257942c79b24e254f6924910f115",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"373297c8235e4748e822da674a0488060bb9c228"})))}get chip(){return s(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};c.style=r;const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const o=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"0feac58e2e7104e948633503bb6e1e41a7933963",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"5bff8f27bda9843ffbad86fed014e6f5b1df3b9c",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"e4ed1025410e1821e1549d8f29f7cc6c5ba57a2d",class:"chip-item__label"}," ",t("slot",{key:"541c9acff7c19e816f75cea1d17de319eefb8536"})," "),t("div",{key:"e5fc6f9e1d1e40bcc2ac591f2e550abcffa4cdad",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"24c75f1d1eb8927d5193875aacda59ce9117e0df",icon:"check-16"}," ")))}get chipItem(){return s(this)}static get watchers(){return{selected:["validateSelected"]}}};o.style=h;const p='@charset "UTF-8";:root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}.page__button{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.ifxItemsPerPageChange=i(this,"ifxItemsPerPageChange",7);this.currentPage=1;this.internalPage=1;this.internalItemsPerPage=10;this.numberOfPages=[];this.total=1;this.filteredItemsPerPage=[];this.visiblePages=[];this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.handlePageClick=e=>{const i=e.currentTarget;const t=parseInt(i.dataset.page);if(!isNaN(t))this.changePage(t)}}watchTotalHandler(){this.calculateNumberOfPages();this.updateVisiblePages()}currentPageWatcher(e){this.internalPage=Math.max(1,Math.min(e,this.numberOfPages.length));this.calculateNumberOfPages();this.updateVisiblePages()}setItemsPerPage(e){var i,t;const s=((i=e.detail)===null||i===void 0?void 0:i.value)||((t=e.detail)===null||t===void 0?void 0:t.label);const a=parseInt(s)||10;if(a===this.internalItemsPerPage){return}this.internalItemsPerPage=a;this.internalPage=1;this.calculateNumberOfPages();this.updateVisiblePages();this.handleEventEmission()}emitItemsPerPage(e){this.ifxItemsPerPageChange.emit(e.detail.label)}async componentDidLoad(){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.addEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}if(!l(this.el)){const e=a();n("ifx-pagination",await e)}this.initPagination()}disconnectedCallback(){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.removeEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}}updateVisiblePages(){const e=2;const i=this.numberOfPages.length;const t=this.internalPage;let s=[];if(i<=5){s=[...this.numberOfPages]}else{s.push(1);if(t>e+1)s.push("...");let a=Math.max(2,t-e);let n=Math.min(i-1,t+e);if(t<=e+1)n=e*2+1;if(t>=i-e)a=i-e*2;for(let e=a;e<=n;e++)s.push(e);if(t<i-e)s.push("...");s.push(i)}this.visiblePages=[...new Set(s)]}calculateNumberOfPages(){const e=Math.ceil(this.total/this.internalItemsPerPage);this.numberOfPages=Array.from({length:e},((e,i)=>i+1));this.internalPage=Math.max(1,Math.min(this.currentPage,e))}filterOptionsArray(){const e=typeof this.itemsPerPage==="string"?JSON.parse(this.itemsPerPage):this.itemsPerPage;this.filteredItemsPerPage=e.map((e=>Object.assign(Object.assign({},e),{label:e.label||e.value})))}componentWillLoad(){this.filterOptionsArray();const e=this.filteredItemsPerPage.find((e=>e.selected));if(e){this.internalItemsPerPage=Number(e.value)}else if(this.filteredItemsPerPage.length>0){this.internalItemsPerPage=Number(this.filteredItemsPerPage[0].value)}this.calculateNumberOfPages();this.internalPage=Math.max(1,Math.min(this.currentPage,this.numberOfPages.length));this.updateVisiblePages()}componentWillUpdate(){if(this.prevInternalPage!==this.internalPage){this.updateVisiblePages();this.prevInternalPage=this.internalPage}}componentDidUpdate(){this.initPagination()}handleEventEmission(){this.ifxPageChange.emit({currentPage:this.internalPage,totalPages:this.numberOfPages.length,itemsPerPage:this.internalItemsPerPage})}initPagination(){const e=this.el.shadowRoot.querySelector(".pagination");if(!e)return;const i=()=>{const i=e.querySelector(".prev");const t=e.querySelector(".next");if(i){i.disabled=this.internalPage===1;i.classList.toggle(this.CLASS_DISABLED,this.internalPage===1)}if(t){t.disabled=this.internalPage===this.numberOfPages.length;t.classList.toggle(this.CLASS_DISABLED,this.internalPage===this.numberOfPages.length)}};e.querySelectorAll("li").forEach((e=>{e.removeEventListener("click",this.handlePageClick);e.addEventListener("click",this.handlePageClick)}));i()}changePage(e){e=Math.max(1,Math.min(e,this.numberOfPages.length));if(e===this.internalPage)return;this.internalPage=e;this.handleEventEmission();this.initPagination()}render(){return t("div",{key:"14f71cd0291d0b01d3b9da91ecec8d3908796107",class:"container"},t("div",{key:"d28f3b1a05cd937eec0efa30b661c1e5671542d3",class:"items__per-page-wrapper"},t("div",{key:"504286b0c1d4d1a77e283612389e2f0a98f76ce3",class:"items__per-page-label"},"Results per Page"),t("div",{key:"61fb210192777dc3ebf7810f0d311eae2abd3dc3",class:"items__per-page-field"},t("ifx-select",{key:"a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07",id:"itemsPerPageSelect",placeholder:"false","show-search":"false",value:undefined,disabled:false,error:false,size:"s",options:this.filteredItemsPerPage,"placeholder-value":"Select"}))),t("nav",{key:"47646225b5ab6cfa65b5620fda57300bc39e23e9",class:"items__total-wrapper","aria-label":`Pagination navigation, page ${this.internalPage} of ${this.numberOfPages.length}`},t("div",{key:"6bdbf4cb181b372491efc177b26c75e1b7677c64",class:"pagination"},t("ifx-icon-button",{key:"ede2c6a66a75510ecc7244be7a7d00dae16f9d3a",class:"prev",icon:"arrow-left-16","aria-label":"Previous Page",onClick:()=>this.changePage(this.internalPage-1)}),t("ol",{key:"43f63193bf3fc7c93fdf714e328da4f1333aca88"},this.visiblePages.map(((e,i)=>typeof e==="number"?t("li",{key:`page-${e}`,class:{[this.CLASS_ACTIVE]:e===this.internalPage},"data-page":e},t("span",{class:"page__button",role:"button",tabindex:"0","aria-current":e===this.internalPage?"page":undefined,"aria-label":`Page ${e}`,onClick:()=>this.changePage(e),onKeyDown:i=>(i.key==="Enter"||i.key===" ")&&this.changePage(e)},e)):t("li",{class:"ellipsis",key:`ellipsis-${i}`},t("span",{"aria-hidden":"true"},"..."))))),t("ifx-icon-button",{key:"610f92b2a6af014529f5562409fa963d85654050",class:"next",icon:"arrow-right-16","aria-label":"Next Page",onClick:()=>this.changePage(this.internalPage+1)}))))}get el(){return s(this)}static get watchers(){return{total:["watchTotalHandler"],currentPage:["currentPageWatcher"]}}};d.style=p;export{c as ifx_chip,o as ifx_chip_item,d as ifx_pagination};
-//# sourceMappingURL=p-4d2dfb65.entry.js.map
+import{r as e,c as i,h as t,a as s}from"./p-DS8meZSd.js";import{d as a,t as n}from"./p-DcmcuUOA.js";import{i as l}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border:1px solid #BFBBBB;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem "Source Sans 3"}.chip__wrapper:hover,.chip__wrapper:focus-visible{outline:none;border:1px solid #575352}.chip__wrapper:focus{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--small{padding:4px 12px}.chip__wrapper.chip__wrapper--large{padding:8px 16px}.chip__wrapper.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.chip__wrapper--selected{outline:3px solid #0A8276;outline-offset:-3px;color:#0A8276}.chip__wrapper.chip__wrapper--selected:hover,.chip__wrapper.chip__wrapper--selected:focus-visible{outline:3px solid #08665C;color:#08665C}.wrapper__label{display:inline-flex;align-items:center;gap:4px;font:400 0.875rem/1.25rem "Source Sans 3"}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem "Source Sans 3"}.wrapper__open-button{display:flex;align-items:center;transition:all 300ms ease}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}';const c=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.placeholder="";this.size="large";this.value=undefined;this.variant="single";this.readOnly=false;this.opened=false;this.selectedOptions=[]}handleValueChange(e){this.syncSelectedOptionsWithProp(e)}handleReadOnlyChange(e){if(e){this.opened=false}}closeDropdownOnOutsideClick(e){const i=e.composedPath();const t=this.chip.shadowRoot.querySelector(".chip__wrapper");const s=this.chip.shadowRoot.querySelector(".chip__dropdown");if(!i.includes(s)&&!i.includes(t)&&this.opened){this.toggleDropdownMenu()}}handleKeyDown(e){if(e.code!=="Tab"){e.preventDefault()}if(e.target.tagName==="IFX-CHIP"){this.handleWrapperKeyDown(e)}else if(e.target.tagName==="IFX-CHIP-ITEM"){this.handleDropdownKeyDown(e)}}updateSelectedOptions(e){const i=e.detail;const t=[...this.selectedOptions];if(this.variant!=="multi"){if(i.selected){this.opened=false;const t=this.getChipItems();t.forEach((i=>{if(i.selected&&i!==e.target){i.chipState=Object.assign(Object.assign({},i.chipState),{emitIfxChipItemSelect:false});i.selected=false}}));this.selectedOptions=[i]}else{this.selectedOptions=[]}this.value=this.selectedOptions[0]?this.selectedOptions[0].value:undefined}else{if(i.selected){if(!this.selectedOptions.find((e=>e.value===i.value))){this.selectedOptions=[...this.selectedOptions,i]}}else{this.selectedOptions=this.selectedOptions.filter((e=>e.value!==i.value))}this.value=this.selectedOptions.map((e=>e.value))}if(i.emitIfxChange){this.ifxChange.emit({previousSelection:t,currentSelection:this.selectedOptions,name:this.placeholder})}}getChipItems(){return this.chip.querySelectorAll("ifx-chip-item")}getSelectedOptions(){if(this.variant!=="multi"){return this.selectedOptions.map((e=>e.label)).join("")}return this.selectedOptions.slice(0,2).map((e=>e.label)).join(", ")}toggleDropdownMenu(){if(this.readOnly)return;this.opened=!this.opened}focusChipItemAt(e=0){this.opened=true;const i=this.getChipItems();let t;if(e===-1){t=i.item(i.length-1)}else if(e>=0&&e<i.length){t=i.item(e)}else{console.error(`Invalid index: ${e}`);return}const s=t.shadowRoot.querySelector(".chip-item");if(s){setTimeout((()=>{s.focus()}),1)}}focusChip(){const e=this.chip.shadowRoot.querySelector(".chip__wrapper");e.focus()}handleUnselectButtonClick(e){e.stopPropagation();this.opened=false;let i=false;const t=this.getChipItems();t.forEach((e=>{if(e.selected){i=true;e.chipState=Object.assign(Object.assign({},e.chipState),{emitIfxChipItemSelect:false});e.selected=false}}));if(i){const e=this.selectedOptions;this.selectedOptions=[];this.value=[];this.ifxChange.emit({previousSelection:e,currentSelection:[],name:this.placeholder})}}handleWrapperClick(){if(!this.readOnly){this.toggleDropdownMenu()}}handleWrapperKeyDown(e){if(this.readOnly)return;if(!this.opened){switch(e.code){case"Space":case"Enter":case"ArrowDown":this.focusChipItemAt(0);break;case"ArrowUp":this.focusChipItemAt(-1);break}}else{switch(e.code){case"Escape":this.opened=false;this.focusChip();break}}}handleDropdownKeyDown(e){let i=this.getChipItems();let t=Array.from(i).indexOf(e.target);if(t===-1){console.error("Target not found in chip items");return}switch(e.code){case"ArrowDown":if(t===i.length-1)break;this.focusChipItemAt(t+1);break;case"ArrowUp":if(t===0)break;this.focusChipItemAt(t-1);break;case"Escape":this.opened=false;this.focusChip();break;case"Space":if(this.variant==="single"){this.opened=false;this.focusChip()}break;case"Enter":this.opened=false;this.focusChip();break}}syncChipState(){const e=this.getChipItems();let i=0;e.forEach((e=>{e.chipState={emitIfxChipItemSelect:true,size:this.size==="small"?"small":"large",variant:this.variant==="multi"?"multi":"single",key:i++}}))}syncSelectedOptionsWithProp(e){this.selectedOptions=[];const i=(()=>{let e=0;return()=>e++})();if(Array.isArray(e)){this.selectedOptions=e.map((e=>({value:e,label:e,selected:true,key:i(),emitIfxChange:true})))}else if(typeof e==="string"){this.selectedOptions=[{value:e,label:e,selected:true,key:i(),emitIfxChange:true}]}this.syncChipState()}componentWillLoad(){this.syncSelectedOptionsWithProp(this.value)}async componentDidLoad(){if(!l(this.chip)){const e=a();n("ifx-chip",await e)}}render(){return t("div",{key:"aee43972031c1cfd4c0e3a1c9e05d14e56ae0f8d",class:"chip"},t("div",{key:"1bdc5297fc429fc3bb24f1252ecd753270af761b",class:`chip__wrapper chip__wrapper--${this.size==="small"?"small":"large"}\n                  chip__wrapper--${this.variant==="multi"?"multi":"single"}\n                  ${this.opened&&!this.readOnly?"chip__wrapper--opened":""}\n                  ${this.selectedOptions.length?"chip__wrapper--selected":""}`,tabIndex:0,onClick:!this.readOnly?()=>{this.handleWrapperClick()}:undefined,role:"combobox","aria-label":this.ariaLabel,"aria-value":this.getSelectedOptions(),"aria-haspopup":!this.readOnly?"listbox":undefined,"aria-expanded":!this.readOnly?this.opened.toString():undefined,"aria-controls":!this.readOnly?"dropdown":undefined,"aria-readonly":this.readOnly?"true":undefined,"aria-multiselectable":this.variant==="multi"?"true":undefined},t("div",{key:"8e24165f68ba1651fd1b1766acb1bef47f85e53e",class:"wrapper__label"},this.selectedOptions.length===0&&`${this.placeholder}`,this.selectedOptions.length!==0&&(this.variant==="multi"||this.readOnly)&&this.placeholder!==""&&`${this.placeholder}:`,this.selectedOptions.length!==0&&t("div",{key:"12b5482198b88105362edbc618fd77e5feb9dd2c",class:"label__selected-options"},this.getSelectedOptions()),this.selectedOptions.length>2&&this.variant==="multi"&&t("ifx-indicator",{key:"50eace4d8b084d3a77a8eb78946f8f103c22e381",variant:"number",number:this.selectedOptions.length-2})),!this.readOnly&&(this.variant!=="multi"||this.variant==="multi"&&this.selectedOptions.length===0)&&t("div",{key:"aab1d44bbabcbfa778c4d2946bb0dff0d838fea1",class:"wrapper__open-button"},t("ifx-icon",{key:1,icon:`chevron-down-16`})),this.variant!=="multi"&&this.readOnly!==false&&this.selectedOptions.length>0&&t("div",{key:"bcd7bb998410f41363d8b14fe5537fd405fd6cac",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`})),this.selectedOptions.length>=1&&this.variant==="multi"&&t("div",{key:"71f3a9a831e0a65d42e50995096e1a2fdff634f3",class:"wrapper__unselect-button",onClick:e=>{this.handleUnselectButtonClick(e)}},t("ifx-icon",{key:2,icon:`cross16`}))),this.opened&&!this.readOnly&&t("div",{key:"922a1cf9f754b8246ae033272a5c3b641bb41784",id:"dropdown",role:"listbox",class:"chip__dropdown"},t("slot",{key:"2406397c61326899eae79e798610f2a567e94bed"})))}get chip(){return s(this)}static get watchers(){return{value:["handleValueChange"],readOnly:["handleReadOnlyChange"]}}};c.style=r;const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem "Source Sans 3"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem "Source Sans 3"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}';const o=class{constructor(t){e(this,t);this.ifxChipItemSelect=i(this,"ifxChipItemSelect",5);this.value=undefined;this.chipState={emitIfxChipItemSelect:true,variant:"multi",size:"large"};this.selected=false}updateItemSelection(e){if(this.chipState.variant==="single"){const i=e.target;if(this.chipItem!==i&&this.chipItem.parentElement===i.parentElement){this.selected=false}}}validateSelected(e,i){if(e!==i){if(this.chipState.emitIfxChipItemSelect){this.emitIfxChipItemSelectEvent()}else{this.chipState.emitIfxChipItemSelect=true}}}getItemLabel(){return this.chipItem.innerText}toggleItemSelection(){this.selected=!this.selected}emitIfxChipItemSelectEvent(e=true){this.ifxChipItemSelect.emit({emitIfxChange:e,key:this.chipState.key,label:this.getItemLabel(),selected:this.selected,value:this.value})}handleItemClick(){this.toggleItemSelection()}handleItemKeyDown(e){if(e.code==="Enter"||e.code==="Space"){this.toggleItemSelection()}}handleSelectedState(){if(this.selected){this.emitIfxChipItemSelectEvent(false)}}componentWillLoad(){this.handleSelectedState()}render(){return t("div",{key:"e74d43ca63eacb144865a6c1bd40b5bf2addc426",class:`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected&&this.chipState.variant)==="single"?"selected":""}`,tabIndex:0,onClick:()=>{this.handleItemClick()},onKeyDown:e=>{this.handleItemKeyDown(e)},role:"option","aria-selected":this.selected.toString()},this.chipState.variant==="multi"&&t("ifx-checkbox",{key:"7bd93f94f3155f73fdcd8798e42f6a11201ac11d",checked:this.selected,tabIndex:-1,size:"s"}),t("div",{key:"854a247db00e595ecfb38e80b257ab1270ef36f3",class:"chip-item__label"}," ",t("slot",{key:"6687cc2e52f714370c93b16e367d62b30a9ea7b0"})," "),t("div",{key:"440a71674a3769490cd843d5f31c3a22e0b08cae",class:"chip-item__selected-indicator"},t("ifx-icon",{key:"3ed8148581d26cf7e142914627eda330cbfed896",icon:"check-16"}," ")))}get chipItem(){return s(this)}static get watchers(){return{selected:["validateSelected"]}}};o.style=h;const p='@charset "UTF-8";:root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family)}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}a{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) a{background-color:#EEEDED}li:active:not(.active) a{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active a{color:#fff}li:hover{cursor:pointer}li a{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (min-width: 400px){li:first-child,li.active-sibling,li.active,li.active+li,li:last-child{display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8)~li{display:none}li:first-child:nth-last-child(n+8)~li.active-sibling:before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li.active+li:after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+5){display:inline-flex;flex-direction:row}li:first-child:nth-last-child(n+8)~li:nth-last-child(5):before{content:"…";font-size:13px;display:inline-block;margin-right:6px}li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-child(-n+2):after,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):before,li:first-child:nth-last-child(n+8)~li:nth-last-child(-n+2):after,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):before,li:first-child:nth-last-child(n+8)~li.active-sibling:nth-last-child(-n+4):after{display:none !important}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5){display:none}li:first-child:nth-last-child(n+8).active~li:nth-last-child(-n+5):before,li:first-child:nth-last-child(n+8)~li.active~li:nth-last-child(-n+5):before{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+5),li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+5){display:inline-flex !important;flex-direction:row}li:first-child:nth-last-child(n+8).active~li:nth-child(-n+4):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(-n+4):after{display:none}li:first-child:nth-last-child(n+8).active~li:nth-child(5):after,li:first-child:nth-last-child(n+8)~li.active~li:nth-child(5):after{content:"…";font-size:13px;display:inline-block;margin-left:6px}li:first-child:nth-last-child(n+8).active:before,li:first-child:nth-last-child(n+8).active:after,li:first-child:nth-last-child(n+8)~li.active:before,li:first-child:nth-last-child(n+8)~li.active:after{display:none}}';const d=class{constructor(t){e(this,t);this.ifxPageChange=i(this,"ifxPageChange",7);this.ifxItemsPerPageChange=i(this,"ifxItemsPerPageChange",7);this.currentPage=1;this.internalPage=1;this.internalItemsPerPage=10;this.numberOfPages=[];this.total=1;this.filteredItemsPerPage=[];this.visiblePages=[];this.CLASS_DISABLED="disabled";this.CLASS_ACTIVE="active";this.handlePageClick=e=>{const i=e.currentTarget;const t=parseInt(i.dataset.page);if(!isNaN(t))this.changePage(t)}}watchTotalHandler(){this.calculateNumberOfPages();this.updateVisiblePages()}currentPageWatcher(e){this.internalPage=Math.max(1,Math.min(e,this.numberOfPages.length));this.calculateNumberOfPages();this.updateVisiblePages()}setItemsPerPage(e){var i,t;const s=((i=e.detail)===null||i===void 0?void 0:i.value)||((t=e.detail)===null||t===void 0?void 0:t.label);const a=parseInt(s)||10;if(a===this.internalItemsPerPage){return}this.internalItemsPerPage=a;this.internalPage=1;this.calculateNumberOfPages();this.updateVisiblePages();this.handleEventEmission()}emitItemsPerPage(e){this.ifxItemsPerPageChange.emit(e.detail.label)}async componentDidLoad(){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.addEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}if(!l(this.el)){const e=a();n("ifx-pagination",await e)}this.initPagination()}disconnectedCallback(){const e=this.el.shadowRoot.querySelector("#itemsPerPageSelect");if(e){e.removeEventListener("ifxSelect",(e=>this.emitItemsPerPage(e)))}}updateVisiblePages(){const e=2;const i=this.numberOfPages.length;const t=this.internalPage;let s=[];if(i<=5){s=[...this.numberOfPages]}else{s.push(1);if(t>e+1)s.push("...");let a=Math.max(2,t-e);let n=Math.min(i-1,t+e);if(t<=e+1)n=e*2+1;if(t>=i-e)a=i-e*2;for(let e=a;e<=n;e++)s.push(e);if(t<i-e)s.push("...");s.push(i)}this.visiblePages=[...new Set(s)]}calculateNumberOfPages(){const e=Math.ceil(this.total/this.internalItemsPerPage);this.numberOfPages=Array.from({length:e},((e,i)=>i+1));this.internalPage=Math.max(1,Math.min(this.currentPage,e))}filterOptionsArray(){const e=typeof this.itemsPerPage==="string"?JSON.parse(this.itemsPerPage):this.itemsPerPage;this.filteredItemsPerPage=e.map((e=>Object.assign(Object.assign({},e),{label:e.label||e.value})))}componentWillLoad(){this.filterOptionsArray();const e=this.filteredItemsPerPage.find((e=>e.selected));if(e){this.internalItemsPerPage=Number(e.value)}else if(this.filteredItemsPerPage.length>0){this.internalItemsPerPage=Number(this.filteredItemsPerPage[0].value)}this.calculateNumberOfPages();this.internalPage=Math.max(1,Math.min(this.currentPage,this.numberOfPages.length));this.updateVisiblePages()}componentWillUpdate(){if(this.prevInternalPage!==this.internalPage){this.updateVisiblePages();this.prevInternalPage=this.internalPage}}componentDidUpdate(){this.initPagination()}handleEventEmission(){this.ifxPageChange.emit({currentPage:this.internalPage,totalPages:this.numberOfPages.length,itemsPerPage:this.internalItemsPerPage})}initPagination(){const e=this.el.shadowRoot.querySelector(".pagination");if(!e)return;const i=()=>{const i=e.querySelector(".prev");const t=e.querySelector(".next");if(i){i.disabled=this.internalPage===1;i.classList.toggle(this.CLASS_DISABLED,this.internalPage===1)}if(t){t.disabled=this.internalPage===this.numberOfPages.length;t.classList.toggle(this.CLASS_DISABLED,this.internalPage===this.numberOfPages.length)}};e.querySelectorAll("li").forEach((e=>{e.removeEventListener("click",this.handlePageClick);e.addEventListener("click",this.handlePageClick)}));i()}changePage(e){e=Math.max(1,Math.min(e,this.numberOfPages.length));if(e===this.internalPage)return;this.internalPage=e;this.handleEventEmission();this.initPagination()}render(){return t("div",{key:"724b3d84f8dc469898c4126b76637c77567f195d",class:"container"},t("div",{key:"171579231fc284e71acfe1df372e6750742a2973",class:"items__per-page-wrapper"},t("div",{key:"916428fde974123aa1b805f4815eae6dc2a64097",class:"items__per-page-label"},"Results per Page"),t("div",{key:"88e7827159c37eee23109dd956863bdc1335f043",class:"items__per-page-field"},t("ifx-select",{key:"08fc2626e633d33dfa0565074464adc4533072f2",id:"itemsPerPageSelect",placeholder:"false","show-search":"false",value:undefined,disabled:false,error:false,size:"s",options:this.filteredItemsPerPage,"placeholder-value":"Select"}))),t("div",{key:"1e0299c9b3ba3bbe229039cfe0f298a821b90aea",class:"items__total-wrapper"},t("div",{key:"f8c507a16e070b199a75b30138829528ee434ccd",class:"pagination"},t("ifx-icon-button",{key:"c6fd48710f97119a71745ff0909b7072aa645e21",class:"prev",icon:"arrow-left-16",onClick:()=>this.changePage(this.internalPage-1)}),t("ol",{key:"860a2420df4b9cdfbed1df0630e8227531b61276"},this.visiblePages.map(((e,i)=>typeof e==="number"?t("li",{key:`page-${e}`,class:{[this.CLASS_ACTIVE]:e===this.internalPage},"data-page":e},t("a",{href:"javascript:void(0)"},e)):t("li",{class:"ellipsis",key:`ellipsis-${i}`},t("span",null,"..."))))),t("ifx-icon-button",{key:"c3645817a9dbc92185d0eef3c71c2231246b3d90",class:"next",icon:"arrow-right-16",onClick:()=>this.changePage(this.internalPage+1)}))))}get el(){return s(this)}static get watchers(){return{total:["watchTotalHandler"],currentPage:["currentPageWatcher"]}}};d.style=p;export{c as ifx_chip,o as ifx_chip_item,d as ifx_pagination};
+//# sourceMappingURL=p-d77af62a.entry.js.map

package/dist/infineon-design-system-stencil/p-d77af62a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","constructor","hostRef","this","placeholder","size","value","undefined","variant","readOnly","opened","selectedOptions","handleValueChange","newValue","syncSelectedOptionsWithProp","handleReadOnlyChange","closeDropdownOnOutsideClick","event","path","composedPath","chipWrapper","chip","shadowRoot","querySelector","chipDropdown","includes","toggleDropdownMenu","handleKeyDown","code","preventDefault","target","tagName","handleWrapperKeyDown","handleDropdownKeyDown","updateSelectedOptions","eventDetail","detail","previousSelection","selected","chipItems","getChipItems","forEach","chipItem","chipState","Object","assign","emitIfxChipItemSelect","find","option","filter","map","emitIfxChange","ifxChange","emit","currentSelection","name","querySelectorAll","getSelectedOptions","label","join","slice","focusChipItemAt","index","item","length","console","error","shadowItem","setTimeout","focus","focusChip","handleUnselectButtonClick","stopPropagation","itemGotUnselected","handleWrapperClick","chipitems","targetIndex","Array","from","indexOf","syncChipState","key","generateKey","count","isArray","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","class","tabIndex","onClick","role","ariaLabel","toString","number","icon","e","id","chipItemCss","ChipItem","updateItemSelection","parentElement","validateSelected","oldValue","emitIfxChipItemSelectEvent","getItemLabel","innerText","toggleItemSelection","ifxChipItemSelect","handleItemClick","handleItemKeyDown","handleSelectedState","onKeyDown","checked","paginationCss","Pagination","currentPage","internalPage","internalItemsPerPage","numberOfPages","total","filteredItemsPerPage","visiblePages","CLASS_DISABLED","CLASS_ACTIVE","handlePageClick","li","currentTarget","page","parseInt","dataset","isNaN","changePage","watchTotalHandler","calculateNumberOfPages","updateVisiblePages","currentPageWatcher","newVal","Math","max","min","setItemsPerPage","selectedValue","_a","_b","newItemsPerPage","handleEventEmission","emitItemsPerPage","ifxItemsPerPageChange","select","el","addEventListener","initPagination","disconnectedCallback","removeEventListener","buffer","totalPages","current","pages","push","start","end","i","Set","ceil","_","filterOptionsArray","items","itemsPerPage","JSON","parse","selectedOption","Number","componentWillUpdate","prevInternalPage","componentDidUpdate","ifxPageChange","pagination","updateButtons","prev","next","disabled","classList","toggle","newPage","options","href"],"sources":["src/components/chip/chip.scss?tag=ifx-chip&encapsulation=shadow","src/components/chip/chip.tsx","src/components/chip/chip-item/chip-item.scss?tag=ifx-chip-item&encapsulation=shadow","src/components/chip/chip-item/chip-item.tsx","src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: inline-block;\n}\n\n.chip {\n    position: relative;\n}\n\n.chip__wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSpace100;\n\n    box-sizing: border-box;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    \n    background: tokens.$ifxColorBaseWhite;\n    \n    cursor: pointer;  \n    \n    transition: border 100ms ease;\n\n    font: tokens.$ifxBodyBody04;\n    \n    &:hover, &:focus-visible {\n        outline: none;\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n\n    &:focus {\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip__wrapper--small {\n        padding: tokens.$ifxSpace50 tokens.$ifxSpace150;\n    }\n    \n    &.chip__wrapper--large {\n        padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    }\n    \n    &.chip__wrapper--opened {\n        border: 1px solid tokens.$ifxColorOcean500;\n        \n        .wrapper__open-button {\n            transform: rotate(-180deg);\n        }\n    }\n    \n    &.chip__wrapper--selected {\n        outline: 3px solid tokens.$ifxColorOcean500;\n        outline-offset: -3px;\n        \n        color: tokens.$ifxColorOcean500;\n        \n        &:hover, &:focus-visible {\n            outline: 3px solid tokens.$ifxColorOcean600;\n            \n            color: tokens.$ifxColorOcean600;\n        }\n    }\n}\n\n.wrapper__label {\n    display: inline-flex;\n    align-items: center;\n    gap: tokens.$ifxSpace50;\n\n    font: tokens.$ifxBodyBody04;\n    \n    .label__selected-options {\n        font: tokens.$ifxBodyBodySemibold04;\n    }\n}\n\n.wrapper__open-button {\n    display:flex;\n    align-items: center;\n    \n    transition: all 300ms ease;\n}\n\n.wrapper__unselect-button {\n    display:flex;\n    align-items: center;\n}\n\n.chip__dropdown {\n    position: absolute;\n    z-index: 1;\n\n    box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n    border: 1px solid tokens.$ifxColorEngineering200;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 0;\n\n    min-width: 222px;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch } from '@stencil/core';\nimport { ChipItemSelectEvent } from './interfaces';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-chip',\n  styleUrl: 'chip.scss',\n  shadow: true\n})\nexport class Chip {\n  @Element() chip: HTMLIfxChipElement;\n\n  @Event() ifxChange: EventEmitter<{ previousSelection: Array<ChipItemSelectEvent>, currentSelection: Array<ChipItemSelectEvent>, name: string }>;\n  @Prop() placeholder: string = '';\n  @Prop() size: 'small' | 'large' = 'large';\n  @Prop({ mutable: true }) value: Array<string> | string = undefined;\n  @Prop() variant: 'single' | 'multi' = 'single';\n  @Prop() readOnly: boolean = false;\n  @Prop() ariaLabel: string | null;\n\n  @State() opened: boolean = false;\n  @State() selectedOptions: Array<ChipItemSelectEvent> = [];\n\n  @Watch('value')\n  handleValueChange(newValue: Array<string> | string) {\n    this.syncSelectedOptionsWithProp(newValue);\n  }\n\n  @Watch('readOnly')\n  handleReadOnlyChange(newValue: boolean) {\n    if (newValue) {\n      this.opened = false;\n    }\n  }\n\n  @Listen('mousedown', { target: 'document' })\n  closeDropdownOnOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    const chipDropdown: HTMLElement = this.chip.shadowRoot.querySelector('.chip__dropdown');\n    if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    // override behavior of all keys except Tab. Users should be able to tab out of the component.\n    if (event.code !== 'Tab') {\n      event.preventDefault(); \n    }\n\n    if ((event.target as HTMLElement).tagName === 'IFX-CHIP') {\n      this.handleWrapperKeyDown(event);\n    } else if ((event.target as HTMLElement).tagName === 'IFX-CHIP-ITEM') {\n      this.handleDropdownKeyDown(event);\n    }\n  }\n\n  @Listen('ifxChipItemSelect')\n  updateSelectedOptions(event: CustomEvent<ChipItemSelectEvent>) {\n    const eventDetail: ChipItemSelectEvent = event.detail;\n    const previousSelection: Array<ChipItemSelectEvent> = [...this.selectedOptions];\n\n    if (this.variant !== 'multi') {\n      if (eventDetail.selected) {\n        this.opened = false;\n        const chipItems: NodeList = this.getChipItems();\n        chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n          if (chipItem.selected && chipItem !== event.target) {\n            chipItem.chipState = {\n              ...chipItem.chipState,\n              emitIfxChipItemSelect: false,\n            };\n            chipItem.selected = false;\n          }\n        });\n        this.selectedOptions = [eventDetail];\n      } else {\n        this.selectedOptions = [];\n      }\n      this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;\n    } else {\n      if (eventDetail.selected) {\n        // Prevent duplicate entries\n        if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {\n          this.selectedOptions = [...this.selectedOptions, eventDetail];\n        }\n      } else {\n        this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);\n      }\n      this.value = this.selectedOptions.map((option) => option.value);\n    }\n\n    if (eventDetail.emitIfxChange) {\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: this.selectedOptions,\n        name: this.placeholder\n      });\n    }\n  }\n\n  getChipItems(): NodeList {\n    return this.chip.querySelectorAll('ifx-chip-item');\n  }\n\n  getSelectedOptions(): string {\n    if (this.variant !== 'multi') {\n      return this.selectedOptions.map(option => option.label).join('');\n    }\n    return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');\n  }\n\n  toggleDropdownMenu() {\n    if (this.readOnly) return;\n    this.opened = !this.opened;\n  }\n\n  /**\n   * Focuses the chip item at the specified index.\n   * @param index the index of the chip item to focus. -1 will focus the last chip item.\n   */\n  focusChipItemAt(index: number = 0) {\n    this.opened = true;\n    const chipItems: NodeList = this.getChipItems();\n    let item: HTMLIfxChipItemElement;\n    \n    if (index === -1) {\n      item = chipItems.item(chipItems.length - 1) as HTMLIfxChipItemElement;\n    } else if (index >= 0 && index < chipItems.length) {\n      item = chipItems.item(index) as HTMLIfxChipItemElement;\n    } else {\n      console.error(`Invalid index: ${index}`);\n      return;\n    }\n\n    const shadowItem = item.shadowRoot.querySelector('.chip-item') as HTMLDivElement;\n    if (shadowItem) {\n      // Delay needed for the shadow item to be rendered.\n      setTimeout(() => {\n        shadowItem.focus();\n      }, 1);\n    }\n  }\n\n  focusChip() {\n    const chipWrapper: HTMLElement = this.chip.shadowRoot.querySelector('.chip__wrapper');\n    chipWrapper.focus();\n  }\n\n  handleUnselectButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.opened = false;\n\n    let itemGotUnselected = false;\n    const chipItems: NodeList = this.getChipItems();\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      if (chipItem.selected) {\n        itemGotUnselected = true;\n        chipItem.chipState = {\n          ...chipItem.chipState,\n          emitIfxChipItemSelect: false,\n        }\n        chipItem.selected = false;\n      }\n    });\n\n    /* Emit event only if at least one item was unselected. */\n    if (itemGotUnselected) {\n      const previousSelection: Array<ChipItemSelectEvent> = this.selectedOptions;\n      this.selectedOptions = [];\n      this.value = [];\n      this.ifxChange.emit({\n        previousSelection: previousSelection,\n        currentSelection: [],\n        name: this.placeholder\n      });\n    }\n  }\n\n  handleWrapperClick() {\n    if (!this.readOnly) {\n      this.toggleDropdownMenu();\n    }\n  }\n\n  handleWrapperKeyDown(event: KeyboardEvent) {\n    // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction\n    if (this.readOnly) return;\n\n    if (!this.opened) {\n      switch (event.code) {\n        case 'Space':\n        case 'Enter':\n        case 'ArrowDown':\n          this.focusChipItemAt(0);\n          break;\n        case 'ArrowUp':\n          this.focusChipItemAt(-1);\n          break;\n      }\n    } else {\n      switch (event.code) {\n        case 'Escape':\n          this.opened = false;\n          this.focusChip();\n          break;\n      }\n    }\n  }\n\n  handleDropdownKeyDown(event: KeyboardEvent) {\n    let chipitems = this.getChipItems();\n\n    let targetIndex = Array.from(chipitems).indexOf(event.target as HTMLIfxChipItemElement);\n    if (targetIndex === -1) {\n      console.error('Target not found in chip items');\n      return;\n    }\n\n    switch (event.code) {\n      case 'ArrowDown':\n        if (targetIndex === chipitems.length - 1) break;\n        this.focusChipItemAt(targetIndex + 1);\n        break;\n      case 'ArrowUp':\n        if (targetIndex === 0) break;\n        this.focusChipItemAt( targetIndex - 1);\n        break;\n      case 'Escape':\n        this.opened = false;\n        this.focusChip();\n        break;\n      case 'Space':\n        // selection is handled by the chip-item component\n        if (this.variant === 'single') {\n          // only close dropdown if single select\n          this.opened = false;\n          this.focusChip();\n        }\n        break;\n      case 'Enter':\n        // selection is handled by the chip-item component\n        this.opened = false;\n        this.focusChip();\n        break;\n      }\n    }\n\n  syncChipState() {\n    const chipItems: NodeList = this.getChipItems();\n    let key: number = 0;\n    chipItems.forEach((chipItem: HTMLIfxChipItemElement) => {\n      chipItem.chipState = {\n        emitIfxChipItemSelect: true,\n        size: (this.size === 'small' ? 'small' : 'large'),\n        variant: (this.variant === 'multi' ? 'multi' : 'single'),\n        key: key++\n      };\n    });\n  }\n\n  syncSelectedOptionsWithProp(newValue: Array<string> | string) {\n    // Clear old selected options\n    this.selectedOptions = [];\n\n    const generateKey = (() => {\n      let count = 0;\n      return () => count++;\n    })();\n\n    if (Array.isArray(newValue)) {\n      this.selectedOptions = newValue.map(value => ({\n        value,\n        label: value,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }));\n    } else if (typeof newValue === 'string') {\n      this.selectedOptions = [{\n        value: newValue,\n        label: newValue,\n        selected: true,\n        key: generateKey(),\n        emitIfxChange: true\n      }];\n    }\n\n    this.syncChipState();\n  }\n\n  componentWillLoad() {\n    this.syncSelectedOptionsWithProp(this.value);\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.chip)) { \n      const framework = detectFramework();\n      trackComponent('ifx-chip', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <div class='chip'>\n        <div class={`chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}\n                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}\n                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}\n                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`}\n          tabIndex={0}\n          onClick={!this.readOnly ? () => { this.handleWrapperClick() } : undefined}\n          role='combobox'\n          aria-label={this.ariaLabel}\n          aria-value={this.getSelectedOptions()}\n          aria-haspopup={!this.readOnly ? 'listbox' : undefined}\n          aria-expanded={!this.readOnly ? this.opened.toString() : undefined}\n          aria-controls={!this.readOnly ? 'dropdown' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          aria-multiselectable={this.variant === 'multi' ? 'true' : undefined}\n          >\n\n          <div class='wrapper__label'>\n            {\n              (this.selectedOptions.length === 0) && `${this.placeholder}`\n            }\n\n            {\n              (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&\n              `${this.placeholder}:`\n            }\n\n            {\n              (this.selectedOptions.length !== 0) &&\n              <div class='label__selected-options'>\n                {this.getSelectedOptions()}\n              </div>\n            }\n\n            {\n              (this.selectedOptions.length > 2 && this.variant === 'multi') &&\n              <ifx-indicator variant='number' number={this.selectedOptions.length - 2}></ifx-indicator>\n            }\n          </div>\n\n          {\n            !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&\n            <div class='wrapper__open-button'>\n              <ifx-icon key={1} icon={`chevron-down-16`} />\n            </div>\n          }\n\n\n          { \n            (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n          {\n            ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&\n            <div class='wrapper__unselect-button' onClick={(e) => { this.handleUnselectButtonClick(e) }}>\n              <ifx-icon key={2} icon={`cross16`} />\n            </div>\n          }\n\n        </div>\n\n        {\n          this.opened && !this.readOnly &&\n          <div id='dropdown' role='listbox' class='chip__dropdown'>\n            <slot />\n          </div>\n        }\n      </div>\n    );\n  }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.chip-item {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    user-select: none;\n    \n    transition: all 100ms ease;\n    transition-property: background, color;\n    \n    &:hover {\n        cursor: pointer;\n        \n        background-color: tokens.$ifxColorEngineering200;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorEngineering300;\n    }\n\n    &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n    }\n    \n    &.chip-item--large {\n        font: tokens.$ifxBodyBody03;\n    }\n    \n    &.chip-item--small {\n        font: tokens.$ifxBodyBody04;\n    }\n\n    &.chip-item--selected {\n        color: tokens.$ifxColorOcean500;\n\n        .chip-item__selected-indicator {\n            display: block;\n        }\n    }\n}\n\n.chip-item__selected-indicator {\n    display: none;\n    \n    margin-left: auto;\n}\n\n","import { h,\n    Component,\n    Element,\n    Event,\n    EventEmitter, \n    Listen,\n    Prop, \n    Watch } from '@stencil/core';\nimport { ChipItemSelectEvent, ChipState } from '../interfaces';\n\n@Component({\ntag: 'ifx-chip-item',\nstyleUrl: 'chip-item.scss',\nshadow: true\n})\n\nexport class ChipItem {\n@Element() chipItem: HTMLIfxChipItemElement;\n\n@Event({ composed: false }) ifxChipItemSelect: EventEmitter<ChipItemSelectEvent>;\n\n@Prop() value: string = undefined;\n@Prop() chipState: ChipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }; \n@Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n@Listen('ifxChipItemSelect', { target: 'body' })\nupdateItemSelection(event: CustomEvent<ChipItemSelectEvent>) {\n   if (this.chipState.variant === 'single') {\n       const target = event.target as HTMLIfxChipItemElement;\n       /* Also making sure chip items are from the same group (parent) while unselecting. */\n       if (this.chipItem !== target && this.chipItem.parentElement === target.parentElement) {\n           this.selected = false;\n       }\n   }\n} \n\n@Watch('selected')\nvalidateSelected(newValue: boolean, oldValue: boolean) {\n   if (newValue !== oldValue) {\n       /* Do not emit if ChipState does not allow. */\n       if (this.chipState.emitIfxChipItemSelect){\n           this.emitIfxChipItemSelectEvent();\n       } else {\n           this.chipState.emitIfxChipItemSelect = true;\n       }\n   }\n} \n\ngetItemLabel(): string {\n   return this.chipItem.innerText as string;\n}\n\ntoggleItemSelection() {\n   this.selected = !this.selected;\n}\n   \n\nemitIfxChipItemSelectEvent(emitIfxChange: boolean = true) {\n   this.ifxChipItemSelect.emit({ emitIfxChange: emitIfxChange,\n                           key: this.chipState.key,\n                           label: this.getItemLabel(), \n                           selected: this.selected, \n                           value: this.value });\n}\n\nhandleItemClick() {\n   this.toggleItemSelection();\n}\n\nhandleItemKeyDown(event: KeyboardEvent) {\n   if (event.code === 'Enter' || event.code === 'Space') {\n       this.toggleItemSelection();\n   }\n}\n\nhandleSelectedState() {\n   if (this.selected) {\n       this.emitIfxChipItemSelectEvent(false);\n   }\n}\n\n\ncomponentWillLoad() {\n   /* Propogating the selected state to the Chip (Parent) component if it is set. */\n   this.handleSelectedState();\n}\n\nrender() {\n   return (\n       <div class={`chip-item chip-item--${this.chipState.size} \n                    chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`} \n           tabIndex={0}\n           onClick={() => {this.handleItemClick()}}\n           onKeyDown={(e) => {this.handleItemKeyDown(e)}}\n           role=\"option\"\n           aria-selected={this.selected.toString()}>    \n           {/* Checkbox; renders only in 'multi' variant. */}\n           { \n               this.chipState.variant === 'multi' &&\n               <ifx-checkbox checked={this.selected}\n                   tabIndex={-1} \n                   size='s'>\n               </ifx-checkbox>\n           }\n\n           <div class='chip-item__label'> <slot /> </div>\n\n           {/* Selected indicator only visible in 'single' variant. */}\n           <div class='chip-item__selected-indicator'> \n               <ifx-icon icon='check-16'> </ifx-icon> \n           </div>\n\n       </div>\n   );\n}\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\na {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & a {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & a {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & a {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & a {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n\n@mixin ellipsis($before: true) {\n  content: \"\\2026\";\n  font-size: 13px;\n  display: inline-block;\n\n  @if($before) {\n    margin-right: 6px;\n  }\n\n  @else {\n    margin-left: 6px;\n  }\n}\n\n\n// @media(max-width:460px) {\n//   li {\n\n//     &:first-child,\n//     &.active,\n//     &.active-sibling:nth-last-child(2), // Show second to last child if the last one is active\n//     &:last-child {\n//       //display: inline-block !important;\n//       display: inline-flex !important;\n//       flex-direction: row;\n//     }\n\n//     $how-many-on-ends: 3; // 1,2,3,...,10 || 1,...,8,9,10\n//     // There are >= 5 pages\n//     &:first-child:nth-last-child(n+6) {\n\n//       &~li {\n//         // Start out with all siblings hidden\n//         display: none;\n\n//         // Show the last children in the list by default\n//         &:nth-last-child(-n+#{$how-many-on-ends}) {\n//           //display: inline-block;\n//           display: inline-flex;\n//           flex-direction: row;\n\n//         }\n\n//         // The child at the beginning of the last group shows ellipsis for the group\n//         &:nth-last-child(#{$how-many-on-ends}) {\n//           &:before {\n//             @include ellipsis(true);\n//           }\n//         }\n\n//         // The very beginning elements do not need to show ellipsis\n//         // The very end elements do not need to show ellipsis\n//       }\n\n\n//       &.active,\n//        &~li.active {\n\n//          // Show ellipsis before and after the active element\n//          &:before {\n//            @include ellipsis(true);\n//          }\n//          &:after {\n//            @include ellipsis(false);\n//          }\n\n\n//          // If the active element is in the first or last group, don't show ellipsis (siblings will take care of it)\n//          &:nth-child(-n+#{$how-many-on-ends - 1}),\n//          &:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n//            &:before, &:after {\n//              display: none;\n//            }\n//          }\n\n//          // Hide the last group if \"active\" comes before them\n//          &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n//            display: none;\n//          }\n\n//          // Show the first group together if \"active\" comes before them\n//          &~li:nth-child(-n+#{$how-many-on-ends}) {\n//            //display: inline-block;\n//            display: inline-flex;\n//            flex-direction: row;\n//          }\n\n//          // If \"active\" is before the last member in the group, don't show ellipsis\n//          &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n//             &:after {\n//               display: none;\n//             }\n//          }\n\n\n//         // The child at the end of the first group shows ellipsis for the group\n//         &~li:nth-child(#{$how-many-on-ends}) {\n//           &:after {\n//             @include ellipsis(false);\n//           }\n//         }\n//       }\n//     }\n//   }\n// }\n\n@media (min-width: 400px) {\n  li {\n\n    &:first-child,\n    &.active-sibling,\n    &.active,\n    &.active+li,\n    &:last-child {\n      //display: inline-block!important;\n      display: inline-flex !important;\n      flex-direction: row;\n    }\n\n    // There are >= 7 pages\n    &:first-child:nth-last-child(n+8) {\n      $how-many-on-ends: 5; // 1,2,3,4,5,...,10 || 1,...6,7,8,9,10\n\n      &~li {\n        // Start out with all siblings hidden\n        display: none;\n\n        // Show ellipsis before the previous one\n        &.active-sibling:before {\n          @include ellipsis(true);\n        }\n\n        // Show ellipsis after the next one\n        &.active+li:after {\n          @include ellipsis(false);\n        }\n\n        // Show the last children in the list by default\n        &:nth-last-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex;\n          flex-direction: row;\n        }\n\n        // The child at the beginning of the last group shows ellipsis for the group\n        &:nth-last-child(#{$how-many-on-ends}) {\n          &:before {\n            @include ellipsis(true);\n          }\n        }\n\n        // The very beginning elements do not need to show ellipsis\n        &:nth-child(-n+#{$how-many-on-ends - 3}),\n        // The very end elements do not need to show ellipsis\n        &:nth-last-child(-n+#{$how-many-on-ends - 3}),\n        // Even if it's a sibling to \"active\"\n        &.active-sibling:nth-last-child(-n+#{$how-many-on-ends - 1}) {\n\n          &:before,\n          &:after {\n            display: none !important;\n          }\n        }\n      }\n\n      &.active,\n      &~li.active {\n\n        // Hide the last group if \"active\" comes before them\n        &~li:nth-last-child(-n+#{$how-many-on-ends}) {\n          display: none;\n\n          // If there is overlap, the element will show, but hide it's ellipsis\n          &:before {\n            display: none;\n          }\n        }\n\n        // Show the first group together if \"active\" comes before them\n        &~li:nth-child(-n+#{$how-many-on-ends}) {\n          //display: inline-block;\n          display: inline-flex !important;\n          flex-direction: row;\n        }\n\n        // If \"active\" is before the last member in the group, don't show ellipsis\n        &~li:nth-child(-n+#{$how-many-on-ends - 1}) {\n          &:after {\n            display: none;\n          }\n        }\n\n\n        // The child at the end of the first group shows ellipsis for the group\n        &~li:nth-child(#{$how-many-on-ends}) {\n          &:after {\n            @include ellipsis(false);\n          }\n        }\n\n        // \"active\" should never show ellipsis\n        &:before,\n        &:after {\n          display: none;\n        }\n      }\n    }\n  }\n}","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxItemsPerPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n \n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n  @Watch('total')\n  watchTotalHandler() {\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n  @Watch('currentPage')\n  currentPageWatcher(newVal: number) {\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label; \n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1; \n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n    emitItemsPerPage(e) { \n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\n    }\n\n  async componentDidLoad() {\n    const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n    if(select) { \n      select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n    }\n\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-pagination', await framework)\n    }\n    this.initPagination();\n  }\n\n  disconnectedCallback() {\n    const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n    if (select) {\n      select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n    }\n  }\n\n  updateVisiblePages() {\n    const buffer = 2;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n  \n    if (totalPages <= 5) {\n      pages = [...this.numberOfPages];\n    } else {\n      pages.push(1);\n  \n      if (current > buffer + 1) pages.push('...');\n  \n      let start = Math.max(2, current - buffer);\n      let end = Math.min(totalPages - 1, current + buffer);\n  \n      if (current <= buffer + 1) end = buffer * 2 + 1;\n      if (current >= totalPages - buffer) start = totalPages - buffer * 2;\n  \n      for (let i = start; i <= end; i++) pages.push(i);\n  \n      if (current < totalPages - buffer) pages.push('...');\n      pages.push(totalPages);\n    }\n  \n    this.visiblePages = [...new Set(pages)];\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() { \n    const items = typeof this.itemsPerPage === 'string' ? \n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    this.filterOptionsArray();\n  \n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\n    if (selectedOption) {\n      this.internalItemsPerPage = Number(selectedOption.value);\n    } else if (this.filteredItemsPerPage.length > 0) {\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\n    }\n\n    this.calculateNumberOfPages();\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() { \n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n    \n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <div class=\"items__per-page-wrapper\">\n          <div class=\"items__per-page-label\">Results per Page</div>\n          <div class=\"items__per-page-field\">\n            <ifx-select\n              id='itemsPerPageSelect'\n              placeholder='false'\n              show-search='false'\n              value={undefined}\n              disabled={false}\n              error={false}\n              size=\"s\"\n              options={this.filteredItemsPerPage}\n              placeholder-value=\"Select\"\n            ></ifx-select>\n          </div>\n        </div>\n        \n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              onClick={() => this.changePage(this.internalPage - 1)}\n            ></ifx-icon-button>\n            \n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li \n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <a href=\"javascript:void(0)\">{page}</a>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span>...</span>\n              </li>\n            ))}\n            </ol>\n            \n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              onClick={() => this.changePage(this.internalPage + 1)}\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-dabc95ae.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s,a as i}from"./p-DS8meZSd.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as o}from"./p-Bw2fh5LT.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{color:#575352;margin-left:4px}.group__label .required.error{color:#CD002F}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{margin-top:4px;display:flex;align-items:center;gap:8px;font-weight:400;font-size:0.75rem;line-height:1rem}.group__caption.error{color:#CD002F}';const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.required=false;this.error=false;this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const i=this.getSegments();i.forEach((i=>{if(i.selected){if(i.segmentIndex!==e){i.selected=false;t=i.value}else{s=i.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}))}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}async componentDidLoad(){if(!o(this.SegmentedControl)){const e=a();r("ifx-segmented-control",await e)}this.setActiveSegment()}render(){return s("div",{key:"89adf4eb1c9da0bdacac4d7d0a26bf0c4d01666d","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"5ed77f418047838589851b36d90d1a12eeb9b664",class:"group__label"},this.label.trim(),this.required&&s("span",{key:"745973fd74bcbdadb4651a8148aa584c45a6999a",class:`required ${this.error?"error":""}`},"*")),s("div",{key:"02a611e12d25901cd6657774d3e6dbebaeb2686d",class:"group__controls"},s("slot",{key:"601f72992d94bc5cefc1de872edd4ba1567c4564"})),this.caption.trim()&&s("div",{key:"b6e5ac307a1d908a5054ce225acc9a41db235618",class:`group__caption ${this.error?"error":""}`},s("ifx-icon",{key:"3d44e4a1a64e608948d807fe6ec014c4adc45c6a",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};n.style=l;export{n as ifx_segmented_control};
+//# sourceMappingURL=p-dabc95ae.entry.js.map

package/dist/infineon-design-system-stencil/p-dabc95ae.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["segmentedControlCss","SegmentedControl","constructor","hostRef","this","caption","label","size","required","error","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n}\n\n.group__label {\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    \n    &:empty {\n        display: none;\n    }\n\n    & .required {\n        color: tokens.$ifxColorEngineering500;\n        margin-left: tokens.$ifxSpace50;\n\n        &.error {\n            color: tokens.$ifxColorRed500;\n        }\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    margin-top: tokens.$ifxSpace50;\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n\n    &.error {\n            color: tokens.$ifxColorRed500;\n        }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n    @Prop() required: boolean = false;\n    @Prop() error: boolean = false;\n\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n                <div class='group__label'>\n                    { this.label.trim() }\n                    { this.required && <span class={`required ${this.error ? 'error' : ''}`}>*</span> }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class={`group__caption ${this.error ? 'error' : ''}`}>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"wIAAA,MAAMA,EAAsB,qlB,MCWfC,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAOC,QAAW,GAClBD,KAAKE,MAAW,GAChBF,KAAIG,KAAwB,UAC5BH,KAAQI,SAAY,MACpBJ,KAAKK,MAAY,MAUjBL,KAAaM,cAAW,EAiFnC,CAvFG,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBN,KAAKU,wBAAwBF,EAAMG,QAC5EX,KAAKM,cAAgBA,EACrBN,KAAKY,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBf,KAAKgB,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOhB,KAAKH,iBAAiByB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBf,KAAKgB,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BxB,KAAKM,cAAgBY,EAAQG,K,MAM7C,cAAAK,GACI,MAAMX,EAAqBf,KAAKgB,cAChCD,EAASE,SAASC,IACdA,EAAQS,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY9B,KAAKG,OAAO,G,CAI3F,sBAAM4B,GACF,IAAIC,EAAuBhC,KAAKH,kBAAmB,CAC/C,MAAMoC,EAAYC,IAClBC,EAAe,8BAA+BF,E,CAElDjC,KAAKuB,kB,CAGT,MAAAa,GACI,OACIC,EAAiB,OAAAC,IAAA,wDAAAtC,KAAKM,cAAa,aAAa,oBAAoBiC,MAAM,SACtEF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACLvC,KAAKE,MAAMsC,OACXxC,KAAKI,UAAYiC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYvC,KAAKK,MAAQ,QAAU,MAAI,MAG3EgC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIAtC,KAAKC,QAAQuC,QACbH,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBvC,KAAKK,MAAQ,QAAU,MACjDgC,EAAU,YAAAC,IAAA,2CAAAG,KAAK,cAAuB,IAAGzC,KAAKC,QAAQuC,Q,CAO1E,kBAAAE,GACI1C,KAAK0B,gB","ignoreList":[]}