@infineon/infineon-design-system-stencil 37.0.1--canary.1950.0b7c007bdf320f4f33829c3475970da89e0220e3.0 → 37.0.1--canary.1950.6038b0d3178856c5a162736357555dcd0b5f8ad8.0

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

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as s,g as t}from"./p-b7a462e5.js";import{t as l}from"./p-ccfd7ad8.js";import{i as a}from"./p-1ecafb97.js";const o=':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 r=o;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}componentWillLoad(){if(!a(this.hostElement)){l("ifx-file-upload")}}componentDidLoad(){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:"8c79c2a907261edc96e95d4981e2415aee908e9a",class:{"file-upload-wrapper":true,disabled:this.disabled}},this.label&&s("label",{key:"14324d0799e0293420912c52e040ebb05f69a23a",class:"file-upload-label",htmlFor:this.internalId},this.label,this.required&&s("span",{key:"edd5608d0a9efa3f6a7954a603925821d3eb0c38",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:"6b9b95cee5dbadcc78026d8ab5c65190382a53f5",class:"file-list-wrapper"},s("div",{key:"1ecf61f95c5530cd8f31499b735023122c17ffbb",class:"upload-heading"},this.labelUploadedFilesHeading),s("ul",{key:"7b9b75bea087847d26f8adff7dbf8e4ec5e6c6c8",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-4a021424.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["fileUploadCss","IfxFileUploadStyle0","FileUpload","constructor","hostRef","this","dragAndDrop","required","disabled","maxFileSizeMB","allowedFileTypes","additionalAllowedFileTypes","label","labelRequiredError","labelBrowseFiles","labelDragAndDrop","labelUploadedFilesHeading","labelFileTooLarge","labelUnsupportedFileType","labelUploaded","labelUploadFailed","labelSupportedFormatsTemplate","labelFileSingular","labelFilePlural","labelMaxFilesInfo","labelMaxFilesExceeded","ariaLabelBrowseFiles","ariaLabelDropzone","ariaLabelFileInput","ariaLabelRemoveFile","ariaLabelCancelUpload","ariaLabelRetryUpload","ariaLabelUploadingStatus","ariaLabelUploadedStatus","ariaLabelUploadFailedStatus","internalId","Math","random","toString","substr","isDragOver","files","uploadTasks","rejectedSizeFiles","rejectedTypeFiles","requiredError","statusMessage","fileInputEl","extensionToMimeMap","jpg","jpeg","png","gif","svg","webp","pdf","doc","docx","xls","xlsx","ppt","pptx","txt","csv","json","mp3","wav","mp4","mov","webm","zip","rar","tar","gz","xml","html","css","js","maxFiles","_maxFiles","value","console","warn","undefined","validateRequired","length","_a","text","type","ifxFileUploadValidation","emit","valid","_b","pluralize","count","getNormalizedFileTypes","Array","isArray","JSON","parse","split","map","t","trim","getLabelFromMimeType","mime","ext","knownMime","Object","entries","toUpperCase","handleFileChange","event","input","target","processFiles","handleDrop","preventDefault","stopPropagation","dataTransfer","droppedFiles","from","allowedMimes","toLowerCase","filter","Boolean","getAdditionalMimeTypes","acceptedFiles","rejectedFiles","forEach","file","isValidType","includes","isValidSize","size","push","ifxFileUploadDrop","handleDragOver","handleDragLeave","fileList","selectedFiles","validFiles","rejectedSize","rejectedType","isDuplicate","some","existing","name","ifxFileUploadInvalid","reason","ifxFileUploadError","errorType","message","availableSlots","limitedFiles","slice","max","overflowFiles","startUpload","ifxFileUploadAdd","addedFiles","ifxFileUploadChange","replace","ifxFileUploadMaxFilesExceeded","attempted","retryUpload","taskIndex","findIndex","splice","ifxFileUploadRetry","ifxFileUploadStart","task","progress","intervalId","completed","uploadHandler","percent","min","then","ifxFileUploadComplete","every","ifxFileUploadAllComplete","catch","error","totalSize","fakeUploadSpeed","uploaded","window","setInterval","round","clearInterval","cancelUpload","_","i","f","ifxFileUploadAbort","removeFile","ifxFileUploadRemove","removedFile","clearRejectedFile","fileName","splitFileNameParts","dotIndex","lastIndexOf","base","substring","getFileIcon","extension","pop","formatSize","bytes","toFixed","getAcceptAttribute","extensionTypes","mimeTypes","join","getFormattedProgressText","uploadedSize","uploadedText","totalText","getSupportedFileText","extensions","allTypes","typesLabel","fileWord","maxFilesText","getFormattedFileTooLargeText","renderStatusMessage","h","class","icon","isInputDisabled","componentWillLoad","isNestedInIfxComponent","hostElement","trackComponent","componentDidLoad","hasAttribute","showDemoStates","injectDemoState","dummyContent","fill","bigContent","uploading","File","failed","tooLarge","unsupported","triggerDemoValidation","render","key","htmlFor","renderDragAndDropArea","renderUploadArea","shape","variant","onClick","find","isUploading","isError","itemClass","uniqueKey","style","display","handleInputRef","el","click","id","ref","accept","multiple","onChange","e","triggerInputClick","onDragOver","onDragLeave","onDrop","role","tabIndex","height","overflow"],"sources":["src/components/file-upload/file-upload.scss?tag=ifx-file-upload&encapsulation=shadow","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  // TODO remove\n  font-family: var(--ifx-font-family, sans-serif);\n}\n\n.file-upload-wrapper {\n  display: flex;\n  flex-direction: column;\n\n  &.disabled {\n    pointer-events: none;\n\n    label,\n    .file-upload-info {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n}\n\n.file-upload-label {\n  font-style: normal;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightM;\n  color: tokens.$ifxColorBaseBlack;\n\n  .required {\n    display: inline-block;\n    margin-left: 4px;\n\n    &.error {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n}\n\n.upload-dropzone {\n  border: 1px dashed tokens.$ifxColorEngineering300;\n  padding: tokens.$ifxSpace500;\n  text-align: center;\n  cursor: pointer;\n  color: tokens.$ifxColorBaseBlack;\n  transition: border-color 0.3s ease;\n  border-radius: tokens.$ifxBorderRadius12;\n  background: tokens.$ifxColorBaseWhite;\n\n  ifx-icon {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover {\n    border: 1px dashed tokens.$ifxColorEngineering400;\n  }\n\n  &.drag-over {\n    border: 1px solid tokens.$ifxColorOcean500;\n    background: tokens.$ifxColorEngineering100;\n\n    &.error {\n      border: 1px solid tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  .disabled & {\n    pointer-events: none;\n    border-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n\n    ifx-icon {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.upload-dropzone input {\n  display: none;\n}\n\n.file-upload-info {\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightRegular;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  letter-spacing: tokens.$ifxLetterSpacingDefault;\n  color: tokens.$ifxColorBaseBlack;\n  margin: 0;\n  margin-top: tokens.$ifxSpace50;\n}\n\n.file-upload-status {\n  font-style: normal;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  letter-spacing: 0.2px;\n  margin-top: tokens.$ifxSpace100;\n\n  &.file-upload-status__error {\n    display: flex;\n    align-items: center;\n    color: tokens.$ifxColorRed500;\n\n    ifx-icon {\n      position: relative;\n      top: - tokens.$ifxSpace12;\n      color: tokens.$ifxColorRed500;\n      margin-right: tokens.$ifxSpace100;\n    }\n  }\n}\n\n.upload-heading {\n  font: tokens.$ifxHeadingHeading06;\n  margin-bottom: tokens.$ifxSpace100;\n}\n\n.file-list-wrapper {\n  margin-top: tokens.$ifxSpace200;\n}\n\n.file-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace200;\n}\n\n.file-item {\n  border: 1px solid tokens.$ifxColorEngineering300;\n  padding-top: tokens.$ifxSpace150;\n  padding-right: tokens.$ifxSpace200;\n  padding-bottom: tokens.$ifxSpace100;\n  padding-left: tokens.$ifxSpace200;\n  display: flex;\n  gap: tokens.$ifxSpace100;\n}\n\n.file-info {\n  width: 100%;\n  min-width: 0;\n}\n\n.file-top-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: tokens.$ifxSpace200;\n  margin-top: - tokens.$ifxSpace100;\n}\n\n.file-top-row ifx-icon {\n  flex-shrink: 0;\n}\n\n.file-name-wrapper {\n  display: flex;\n  min-width: 0;\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  font-weight: tokens.$ifxFontWeightRegular;\n  font-size: tokens.$ifxFontSizeS;\n}\n\n.file-name-base {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.file-name-ext {\n  flex-shrink: 0;\n  margin-left: 0;\n}\n\n.file-middle-row {\n  display: flex;\n  align-items: center;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  flex-wrap: wrap;\n  color: tokens.$ifxColorEngineering500;\n\n  .file-status {\n    margin-left: tokens.$ifxSpace150;\n\n    ifx-icon {\n      margin-right: tokens.$ifxSpace100;\n    }\n  }\n}\n\n.file-progress-row {\n  margin-top: tokens.$ifxSpace50;\n}\n\n.file-progress-row ifx-progress-bar {\n  width: 100%;\n}\n\n.upload-success {\n  border-color: tokens.$ifxColorOcean500;\n\n  .file-status {\n    ifx-icon {\n      position: relative;\n      top: tokens.$ifxSpace12;\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n}\n\n.upload-failed {\n  border-color: tokens.$ifxColorRed500;\n\n  .file-status {\n    color: tokens.$ifxColorRed500;\n    margin-left: 0;\n  }\n}\n","import { Component, h, State, Event, EventEmitter, Prop, Method, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\ninterface UploadTask {\n  file: File;\n  progress: number;\n  intervalId: number | null;\n  completed: boolean;\n  error?: boolean;\n}\n\nexport type FileUploadErrorReason =\n  | 'network-error'\n  | 'timeout'\n  | 'file-too-large'\n  | 'unsupported-type'\n  | 'invalid-type'\n  | 'custom'\n  | (string & {});\n\n@Component({\n  tag: 'ifx-file-upload',\n  styleUrl: 'file-upload.scss',\n  shadow: true\n})\nexport class FileUpload {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() dragAndDrop: boolean = false;\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxFileSizeMB: number = 7;\n  /** Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`. */\n  @Prop() allowedFileTypes: string | string[] = ['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4'];\n  @Prop() additionalAllowedFileTypes?: string | string[] = [];\n  @Prop() uploadHandler?: (file: File, onProgress?: (progress: number) => void) => Promise<void>;\n\n  private _maxFiles?: number;\n  @Prop()\n  get maxFiles(): number | undefined {\n    return this._maxFiles;\n  }\n  set maxFiles(value: number | undefined) {\n    if (typeof value === 'number' && value < 1) {\n      console.warn('Invalid `maxFiles` value. Must be >= 1. Value ignored.');\n      this._maxFiles = undefined;\n    } else {\n      this._maxFiles = value;\n    }\n  }\n\n  @Prop() label: string = 'Label';\n  @Prop() labelRequiredError: string = 'At least one file must be uploaded';\n  @Prop() labelBrowseFiles: string = 'Browse files';\n  @Prop() labelDragAndDrop: string = 'Drag & Drop or browse files to upload';\n  @Prop() labelUploadedFilesHeading: string = 'Uploaded files';\n  @Prop() labelFileTooLarge: string = 'Upload failed. Max file size: {{size}}MB.';\n  @Prop() labelUnsupportedFileType: string = 'Unsupported file type.';\n  @Prop() labelUploaded: string = 'Successfully uploaded';\n  @Prop() labelUploadFailed: string = 'Upload failed. Please try again.';\n  @Prop() labelSupportedFormatsTemplate: string = 'Supported file formats: {{types}}. Max file size: {{size}}MB.';\n  @Prop() labelFileSingular: string = 'file';\n  @Prop() labelFilePlural: string = 'files';\n  @Prop() labelMaxFilesInfo?: string = 'Up to {{count}} {{files}}.';\n  @Prop() labelMaxFilesExceeded: string = 'Upload limit exceeded. Only {{count}} {{files}} allowed.';\n\n  @Prop() ariaLabelBrowseFiles: string = 'Browse files';\n  @Prop() ariaLabelDropzone: string = 'Upload area. Click to browse or drag and drop files.';\n  @Prop() ariaLabelFileInput: string = 'Upload file';\n  @Prop() ariaLabelRemoveFile: string = 'Remove file';\n  @Prop() ariaLabelCancelUpload: string = 'Cancel upload';\n  @Prop() ariaLabelRetryUpload: string = 'Retry upload';\n  @Prop() ariaLabelUploadingStatus: string = 'Upload in progress';\n  @Prop() ariaLabelUploadedStatus: string = 'Upload completed';\n  @Prop() ariaLabelUploadFailedStatus: string = 'Upload failed';\n\n  private showDemoStates?: boolean;\n  private internalId = `ifx-file-upload-${Math.random().toString(36).substr(2, 9)}`;\n\n  @State() isDragOver: boolean = false;\n  @State() files: File[] = [];\n  @State() uploadTasks: UploadTask[] = [];\n  @State() rejectedSizeFiles: string[] = [];\n  @State() rejectedTypeFiles: string[] = [];\n  @State() requiredError: boolean = false;\n  @State() statusMessage: { type: 'error' | 'info' | 'success'; text: string } | null = null;\n\n\n  @Event() ifxFileUploadAdd: EventEmitter<{ addedFiles: File[]; files: File[] }>;\n  @Event() ifxFileUploadRemove: EventEmitter<{ removedFile: File; files: File[] }>;\n  @Event() ifxFileUploadChange: EventEmitter<{ files: File[] }>;\n  @Event() ifxFileUploadError: EventEmitter<{ errorType: string; file: File; message: string; reason?: string; }>;\n  @Event() ifxFileUploadInvalid: EventEmitter<{ file: File; reason: string }>;\n  @Event() ifxFileUploadStart: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadComplete: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadAllComplete: EventEmitter<{ files: File[] }>;\n  @Event() ifxFileUploadAbort: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadDrop: EventEmitter<{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[] }>;\n  @Event() ifxFileUploadClick: EventEmitter<void>;\n  @Event() ifxFileUploadMaxFilesExceeded: EventEmitter<{ maxFiles: number; attempted: number }>;\n  @Event() ifxFileUploadValidation: EventEmitter<{ valid: boolean }>;\n  @Event() ifxFileUploadRetry: EventEmitter<{ file: File }>;\n\n  private fileInputEl: HTMLInputElement | null = null;\n\n  private extensionToMimeMap: Record<string, string> = {\n    /**\n     * Maps file extensions to MIME types.\n     * This is only used for translating `allowedFileTypes` (extensions) into MIME types,\n     * and for labeling in the UI. It does NOT define which files are globally allowed.\n     */\n\n    // Images\n    jpg: 'image/jpeg',\n    jpeg: 'image/jpeg',\n    png: 'image/png',\n    gif: 'image/gif',\n    svg: 'image/svg+xml',\n    webp: 'image/webp',\n\n    // Documents\n    pdf: 'application/pdf',\n    doc: 'application/msword',\n    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    xls: 'application/vnd.ms-excel',\n    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    ppt: 'application/vnd.ms-powerpoint',\n    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n    txt: 'text/plain',\n    csv: 'text/csv',\n    json: 'application/json',\n\n    // Audio/Video\n    mp3: 'audio/mpeg',\n    wav: 'audio/wav',\n    mp4: 'video/mp4',\n    mov: 'video/quicktime',\n    webm: 'video/webm',\n\n    // Archive / Code\n    zip: 'application/zip',\n    rar: 'application/vnd.rar',\n    tar: 'application/x-tar',\n    gz: 'application/gzip',\n\n    // Sonstiges\n    xml: 'application/xml',\n    html: 'text/html',\n    css: 'text/css',\n    js: 'application/javascript'\n  };\n\n  private validateRequired(): void {\n    if (this.required && this.files.length === 0) {\n      this.requiredError = true;\n\n      if (this.statusMessage?.text !== this.labelRequiredError) {\n        this.statusMessage = {\n          type: 'error',\n          text: this.labelRequiredError\n        };\n      }\n\n      this.ifxFileUploadValidation.emit({ valid: false });\n    } else {\n      this.requiredError = false;\n\n      if (this.statusMessage?.text === this.labelRequiredError) {\n        this.statusMessage = null;\n      }\n\n      this.ifxFileUploadValidation.emit({ valid: true });\n    }\n  }\n\n  private pluralize(count: number): string {\n    return count === 1 ? this.labelFileSingular : this.labelFilePlural;\n  }\n\n  private getNormalizedFileTypes(): string[] {\n    if (Array.isArray(this.allowedFileTypes)) {\n      return this.allowedFileTypes;\n    }\n    try {\n      return JSON.parse(this.allowedFileTypes);\n    } catch {\n      return this.allowedFileTypes.split(',').map(t => t.trim());\n    }\n  }\n\n  private getLabelFromMimeType(mime: string): string {\n    for (const [ext, knownMime] of Object.entries(this.extensionToMimeMap)) {\n      if (knownMime === mime) {\n        return ext.toUpperCase();\n      }\n    }\n    return mime; // fallback: show raw MIME\n  }\n\n  handleFileChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (!input.files) return;\n    this.processFiles(input.files);\n  }\n\n  handleDrop(event: DragEvent) {\n    if (this.disabled) return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n    if (event.dataTransfer?.files) {\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      const allowedMimes = [\n        ...this.getNormalizedFileTypes()\n          .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n          .filter(Boolean),\n        ...this.getAdditionalMimeTypes()\n      ];\n\n      const acceptedFiles: File[] = [];\n      const rejectedFiles: File[] = [];\n\n      droppedFiles.forEach(file => {\n        const isValidType = allowedMimes.includes(file.type);\n        const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n        if (isValidType && isValidSize) acceptedFiles.push(file);\n        else rejectedFiles.push(file);\n      });\n\n      this.ifxFileUploadDrop.emit({\n        droppedFiles,\n        acceptedFiles,\n        rejectedFiles\n      });\n\n      this.processFiles(event.dataTransfer.files);\n    }\n  }\n\n  handleDragOver(event: DragEvent) {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.isDragOver = true;\n  }\n\n  handleDragLeave(event: DragEvent) {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.isDragOver = false;\n  }\n\n  processFiles(fileList: FileList) {\n    const selectedFiles = Array.from(fileList);\n    const allowedMimes = [\n      ...this.getNormalizedFileTypes()\n        .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n        .filter(Boolean),\n      ...this.getAdditionalMimeTypes()\n    ];\n\n    const validFiles: File[] = [];\n    const rejectedSize: string[] = [];\n    const rejectedType: string[] = [];\n\n    selectedFiles.forEach(file => {\n      const isValidType = allowedMimes.includes(file.type);\n      const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n      const isDuplicate = this.files.some(existing =>\n        existing.name === file.name && existing.size === file.size\n      );\n\n      if (isDuplicate) {\n        this.ifxFileUploadInvalid.emit({ file, reason: 'duplicate' });\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: 'duplicate',\n          message: `File \"${file.name}\" is already added`,\n          reason: 'duplicate'\n        });\n        return;\n      }\n\n      if (isValidType && isValidSize) {\n        validFiles.push(file);\n      } else {\n        if (!isValidType) {\n          rejectedType.push(file.name);\n          this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-type' });\n        }\n        if (!isValidSize) {\n          rejectedSize.push(file.name);\n          this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-size' });\n        }\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: !isValidType ? 'invalid-type' : 'file-too-large',\n          message: 'Invalid file rejected',\n          reason: !isValidType ? 'unsupported-type' : 'file-too-large'\n        });\n      }\n    });\n\n    this.rejectedSizeFiles = [...this.rejectedSizeFiles, ...rejectedSize];\n    this.rejectedTypeFiles = [...this.rejectedTypeFiles, ...rejectedType];\n\n    if (this.maxFiles && this.files.length + validFiles.length > this.maxFiles) {\n      const availableSlots = this.maxFiles - this.files.length;\n      const limitedFiles = validFiles.slice(0, Math.max(availableSlots, 0));\n      const overflowFiles = validFiles.slice(availableSlots);\n\n      this.files = [...this.files, ...limitedFiles];\n\n      limitedFiles.forEach(file => this.startUpload(file));\n\n      if (limitedFiles.length > 0) {\n        this.ifxFileUploadAdd.emit({ addedFiles: limitedFiles, files: this.files });\n        this.ifxFileUploadChange.emit({ files: this.files });\n      }\n\n      overflowFiles.forEach(file => {\n        this.ifxFileUploadInvalid.emit({ file, reason: 'too-many-files' });\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: 'too-many-files',\n          message: `Upload limit exceeded. Max ${this.maxFiles} files allowed.`,\n          reason: 'too-many-files'\n        });\n      });\n\n      if (overflowFiles.length > 0) {\n        this.statusMessage = {\n          type: 'error',\n          text: this.labelMaxFilesExceeded\n            .replace('{{count}}', this.maxFiles.toString())\n            .replace('{{files}}', this.pluralize(this.maxFiles))\n        };\n        this.ifxFileUploadMaxFilesExceeded.emit({\n          maxFiles: this.maxFiles,\n          attempted: this.files.length + validFiles.length\n        });\n      }\n\n      return;\n    }\n\n\n    validFiles.forEach(file => this.startUpload(file));\n    this.files = [...this.files, ...validFiles];\n\n    if (validFiles.length > 0) {\n      this.ifxFileUploadAdd.emit({ addedFiles: validFiles, files: this.files });\n      this.ifxFileUploadChange.emit({ files: this.files });\n    }\n\n    this.validateRequired();\n  }\n\n  retryUpload(file: File) {\n    const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n    if (taskIndex !== -1) {\n      this.uploadTasks.splice(taskIndex, 1);\n      this.uploadTasks = [...this.uploadTasks];\n    }\n    this.ifxFileUploadRetry.emit({ file });\n    this.startUpload(file);\n  }\n\n  startUpload(file: File) {\n    this.ifxFileUploadStart.emit({ file });\n\n    const task: UploadTask = {\n      file,\n      progress: 3, // Start with initial progress for better UX\n      intervalId: null,\n      completed: false,\n    };\n\n    this.uploadTasks = [...this.uploadTasks, task];\n\n    if (this.uploadHandler) {\n      this.uploadHandler(file, (percent: number) => {\n        if (percent > task.progress) {\n          task.progress = Math.min(100, percent);\n          this.uploadTasks = [...this.uploadTasks];\n        }\n      }).then(() => {\n        task.progress = 100;\n        task.completed = true;\n        this.uploadTasks = [...this.uploadTasks];\n        this.ifxFileUploadComplete.emit({ file });\n        this.ifxFileUploadChange.emit({ files: this.files });\n\n        if (this.uploadTasks.every(t => t.completed)) {\n          this.ifxFileUploadAllComplete.emit({ files: this.files });\n        }\n      }).catch(() => {\n        task.error = true;\n        this.uploadTasks = [...this.uploadTasks];\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: 'upload-failed',\n          message: 'Upload handler rejected file',\n          reason: 'custom'\n        });\n      });\n    } else {\n      const totalSize = file.size;\n      const fakeUploadSpeed = 100000;\n      let uploaded = 0;\n\n      task.intervalId = window.setInterval(() => {\n        uploaded += fakeUploadSpeed / 5;\n        const progress = Math.min(100, Math.round((uploaded / totalSize) * 100));\n        task.progress = progress;\n        this.uploadTasks = [...this.uploadTasks];\n\n        if (progress >= 100) {\n          clearInterval(task.intervalId!);\n          task.completed = true;\n          task.intervalId = null;\n          this.uploadTasks = [...this.uploadTasks];\n          this.ifxFileUploadComplete.emit({ file });\n          this.ifxFileUploadChange.emit({ files: this.files });\n\n          if (this.uploadTasks.every(t => t.completed)) {\n            this.ifxFileUploadAllComplete.emit({ files: this.files });\n          }\n        }\n      }, 200);\n    }\n\n    this.uploadTasks = [...this.uploadTasks, task];\n  }\n\n  cancelUpload(file: File) {\n    const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n    if (taskIndex !== -1) {\n      const task = this.uploadTasks[taskIndex];\n      if (task?.intervalId !== null) {\n        clearInterval(task.intervalId);\n      }\n      this.uploadTasks = this.uploadTasks.filter((_, i) => i !== taskIndex);\n    }\n    this.files = this.files.filter(f => f.name !== file.name);\n    this.ifxFileUploadAbort.emit({ file });\n    this.ifxFileUploadChange.emit({ files: this.files });\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n    this.validateRequired();\n  }\n\n  removeFile(file: File) {\n    this.uploadTasks = this.uploadTasks.filter(task => task.file.name !== file.name);\n    this.files = this.files.filter(f => f.name !== file.name);\n    this.ifxFileUploadRemove.emit({ removedFile: file, files: this.files });\n    this.ifxFileUploadChange.emit({ files: this.files });\n    this.validateRequired();\n\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n\n    if (\n      this.maxFiles &&\n      this.files.length < this.maxFiles &&\n      this.statusMessage?.text !== this.labelRequiredError\n    ) {\n      this.statusMessage = null;\n    }\n  }\n\n\n  clearRejectedFile(fileName: string, type: 'size' | 'type') {\n    if (type === 'size') {\n      this.rejectedSizeFiles = this.rejectedSizeFiles.filter(f => f !== fileName);\n    } else {\n      this.rejectedTypeFiles = this.rejectedTypeFiles.filter(f => f !== fileName);\n    }\n\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n\n    if (this.maxFiles && this.files.length < this.maxFiles) {\n      this.statusMessage = null;\n    }\n\n    this.validateRequired();\n  }\n\n  splitFileNameParts(file: File): { base: string; ext: string } {\n    const name = file.name;\n    const dotIndex = name.lastIndexOf('.');\n    if (dotIndex === -1) return { base: name, ext: '' };\n    return {\n      base: name.substring(0, dotIndex),\n      ext: name.substring(dotIndex)\n    };\n  }\n\n  getFileIcon(file: File): string {\n    const extension = file.name.split('.').pop()?.toLowerCase();\n    switch (extension) {\n      case 'pdf': return 'file-pdf-16';\n      case 'jpg':\n      case 'jpeg': return 'file-jpg-16';\n      case 'png': return 'file-png-16';\n      case 'mov': return 'file-mov-16';\n      case 'mp3': return 'file-mp3-16';\n      case 'mp4': return 'file-mp4-16';\n      default: return 'file-16';\n    }\n  }\n\n  formatSize(bytes: number): string {\n    if (bytes >= 1024 * 1024 * 1024) {\n      return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n    } else if (bytes >= 1024 * 1024) {\n      return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n    } else if (bytes >= 1024) {\n      return `${(bytes / 1024).toFixed(0)} KB`;\n    } else {\n      return `${bytes} B`;\n    }\n  }\n\n  getAcceptAttribute(): string {\n    const extensionTypes = this.getNormalizedFileTypes().map(ext => '.' + ext.toLowerCase());\n    const mimeTypes = this.getAdditionalMimeTypes();\n\n    return [...extensionTypes, ...mimeTypes].join(',');\n  }\n\n  private getFormattedProgressText(task: UploadTask): string {\n    const uploadedSize = Math.round((task.progress / 100) * task.file.size);\n    const uploadedText = this.formatSize(uploadedSize);\n    const totalText = this.formatSize(task.file.size);\n    return `${uploadedText} / ${totalText} uploaded`;\n  }\n\n  private getAdditionalMimeTypes(): string[] {\n    if (!this.additionalAllowedFileTypes) return [];\n    if (Array.isArray(this.additionalAllowedFileTypes)) return this.additionalAllowedFileTypes;\n    return this.additionalAllowedFileTypes.split(',').map(t => t.trim());\n  }\n\n  private getSupportedFileText(): string {\n    const extensions = this.getNormalizedFileTypes().map(ext => ext.toUpperCase());\n    const mimeTypes = this.getAdditionalMimeTypes().map(mime => this.getLabelFromMimeType(mime));\n    const allTypes = [...extensions, ...mimeTypes];\n    const typesLabel = allTypes.join(', ');\n\n    let text = this.labelSupportedFormatsTemplate\n      .replace('{{types}}', typesLabel)\n      .replace('{{size}}', this.maxFileSizeMB.toString());\n\n    if (this.labelMaxFilesInfo && this.maxFiles) {\n      const fileWord = this.pluralize(this.maxFiles);\n      const maxFilesText = this.labelMaxFilesInfo\n        .replace('{{count}}', this.maxFiles.toString())\n        .replace('{{files}}', fileWord);\n      text += ` ${maxFilesText}`;\n    }\n\n    return text;\n  }\n\n  private getFormattedFileTooLargeText(): string {\n    return this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString());\n  }\n\n  private renderStatusMessage() {\n    if (!this.statusMessage) return null;\n\n    return (\n      <div class={`file-upload-status file-upload-status__${this.statusMessage.type}`}>\n        {this.statusMessage.type === 'error' && (\n          <ifx-icon icon=\"c-warning-16\"></ifx-icon>\n        )}\n        {this.statusMessage.text}\n      </div>\n    );\n  }\n\n  private isInputDisabled(): boolean {\n    return this.disabled || (this.maxFiles !== undefined && this.files.length >= this.maxFiles);\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.hostElement)) { \n      trackComponent('ifx-file-upload')\n    }\n  }\n\n  componentDidLoad() {\n    if (this.hostElement.hasAttribute('show-demo-states')) {\n      this.showDemoStates = true;\n    }\n\n    if (this.showDemoStates) {\n      this.injectDemoState();\n    }\n  }\n\n  // Storybook Demo\n  @Method()\n  async injectDemoState() {\n    const dummyContent = new Array(50000).fill('a').join(''); // ~50 KB\n    const bigContent = dummyContent + dummyContent; // ~100 KB\n\n    const uploading = new File([dummyContent], 'Image.jpg', { type: 'image/jpeg' }); // ~50 KB\n    const uploaded = new File([bigContent], 'File.pdf', { type: 'application/pdf' }); // ~100 KB\n    const failed = new File([dummyContent], 'Text.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); // ~50 KB\n    const tooLarge = new File([bigContent + bigContent + bigContent], 'Video.mp4', { type: 'video/mp4' }); // ~300 KB\n    const unsupported = new File(['demo'], 'Script.exe', { type: 'application/x-msdownload' }); // very small\n\n    this.files = [uploaded, uploading, failed];\n    this.uploadTasks = [\n      { file: uploaded, progress: 100, intervalId: null, completed: true },\n      { file: uploading, progress: 40, intervalId: null, completed: false },\n      { file: failed, progress: 80, intervalId: null, completed: false, error: true }\n    ];\n    this.rejectedSizeFiles = [tooLarge.name];\n    this.rejectedTypeFiles = [unsupported.name];\n  }\n\n\n\n  // Storybook Demo\n  @Method()\n    async triggerDemoValidation(): Promise<void> {\n      this.validateRequired();\n    }\n\n  render() {\n    return (\n      <div\n        class={{\n          'file-upload-wrapper': true,\n          'disabled': this.disabled\n        }}\n      >\n        {this.label && (\n          <label class=\"file-upload-label\" htmlFor={this.internalId}>\n            {this.label}\n            {this.required && (\n              <span class={`required ${this.requiredError ? 'error' : ''}`}>*</span>\n            )}\n          </label>\n        )}\n\n        {this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea()}\n\n        {(this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (\n          <div class=\"file-list-wrapper\">\n            <div class=\"upload-heading\">{this.labelUploadedFilesHeading}</div>\n            <ul class=\"file-list\">\n              {this.rejectedSizeFiles.map(fileName => (\n                <li class=\"file-item upload-failed\" key={`rejected-size-${fileName}`}>\n                  <div class=\"file-icon\">\n                    <ifx-icon icon=\"file-16\"></ifx-icon>\n                  </div>\n                  <div class=\"file-info\">\n                    <div class=\"file-top-row\">\n                      <span class=\"file-name-wrapper\">\n                        <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n                        <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n                      </span>\n                      <div class=\"file-actions\">\n                        <ifx-icon-button\n                          shape=\"square\"\n                          variant=\"tertiary\"\n                          icon=\"delete-forever-16\"\n                          size=\"s\"\n                          aria-label={this.ariaLabelRemoveFile}\n                          onClick={() => this.clearRejectedFile(fileName, 'size')}\n                        ></ifx-icon-button>\n                      </div>\n                    </div>\n                    <div class=\"file-middle-row\">\n                      <span class=\"file-status\" aria-label={this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString())}>\n                        {this.getFormattedFileTooLargeText()}\n                      </span>\n                    </div>\n                  </div>\n                </li>\n              ))}\n\n              {this.rejectedTypeFiles.map(fileName => (\n                <li class=\"file-item upload-failed\" key={`rejected-type-${fileName}`}>\n                  <div class=\"file-icon\">\n                    <ifx-icon icon=\"file-16\"></ifx-icon>\n                  </div>\n                  <div class=\"file-info\">\n                    <div class=\"file-top-row\">\n                      <span class=\"file-name-wrapper\">\n                        <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n                        <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n                      </span>\n                      <div class=\"file-actions\">\n                        <ifx-icon-button\n                          shape=\"square\"\n                          variant=\"tertiary\"\n                          icon=\"delete-forever-16\"\n                          size=\"s\"\n                          aria-label={this.ariaLabelRemoveFile}\n                          onClick={() => this.clearRejectedFile(fileName, 'type')}\n                        ></ifx-icon-button>\n                      </div>\n                    </div>\n                    <div class=\"file-middle-row\">\n                      <span class=\"file-status\" aria-label={this.labelUnsupportedFileType}>\n                        {this.labelUnsupportedFileType}\n                      </span>\n                    </div>\n                  </div>\n                </li>\n              ))}\n\n              {this.files.map((file) => {\n                const task = this.uploadTasks.find(t => t.file.name === file.name);\n                const progress = task?.progress ?? 100;\n                const isUploading = task && !task.completed;\n                const isError = task?.error === true;\n                const itemClass = isError ? 'file-item upload-failed' : isUploading ? 'file-item uploading' : 'file-item upload-success';\n                const uniqueKey = `${file.name}-${file.size}`;\n                const { base, ext } = this.splitFileNameParts(file);\n\n                return (\n                  <li class={itemClass} key={uniqueKey}>\n                    <div class=\"file-icon\">\n                      <ifx-icon icon={this.getFileIcon(file)}></ifx-icon>\n                    </div>\n                    <div class=\"file-info\">\n                      <div class=\"file-top-row\">\n                        <span class=\"file-name-wrapper\">\n                          <span class=\"file-name-base\">{base}</span>\n                          <span class=\"file-name-ext\">{ext}</span>\n                        </span>\n                        <div class=\"file-actions\">\n                          <ifx-icon-button\n                            shape=\"square\"\n                            variant=\"tertiary\"\n                            icon=\"refresh-16\"\n                            size=\"s\"\n                            aria-label={this.ariaLabelRetryUpload}\n                            onClick={() => this.retryUpload(file)}\n                            style={{ display: isError ? 'inline-flex' : 'none' }}\n                          ></ifx-icon-button>\n                          <ifx-icon-button\n                            shape=\"square\"\n                            variant=\"tertiary\"\n                            icon=\"cross-16\"\n                            size=\"s\"\n                            aria-label={this.ariaLabelCancelUpload}\n                            onClick={() => this.cancelUpload(file)}\n                            style={{ display: isUploading ? 'inline-flex' : 'none' }}\n                          ></ifx-icon-button>\n                          <ifx-icon-button\n                            shape=\"square\"\n                            variant=\"tertiary\"\n                            icon=\"delete-forever-16\"\n                            size=\"s\"\n                            aria-label={this.ariaLabelRemoveFile}\n                            onClick={() => this.removeFile(file)}\n                            style={{ display: !isUploading ? 'inline-flex' : 'none' }}\n                          ></ifx-icon-button>\n                        </div>\n                      </div>\n\n                      <div class=\"file-middle-row\">\n                        {isUploading && task && !task.error && (\n                          <span class=\"file-uploading\" aria-label={this.ariaLabelUploadingStatus}>\n                            {this.getFormattedProgressText(task)}\n                          </span>\n                        )}\n                        {!isUploading && !isError && (\n                          <span>\n                            <span class=\"file-size\">{this.formatSize(file.size)}</span>\n                            <span class=\"file-status\" aria-label={this.ariaLabelUploadedStatus}>\n                              <ifx-icon icon=\"check-16\"></ifx-icon>\n                              {this.labelUploaded}\n                            </span>\n                          </span>\n                        )}\n                        {isError && (\n                          <span class=\"file-status\" aria-label={this.ariaLabelUploadFailedStatus}>\n                            {this.labelUploadFailed}\n                          </span>\n                        )}\n                      </div>\n\n                      {isUploading && task && !task.error && (\n                        <div class=\"file-progress-row\">\n                          <ifx-progress-bar\n                            size=\"s\"\n                            value={progress}\n                            show-label=\"true\"\n                          ></ifx-progress-bar>\n                        </div>\n                      )}\n                    </div>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderUploadArea() {\n    const handleInputRef = (el: HTMLInputElement | null) => {\n      this.fileInputEl = el;\n    };\n\n    return (\n      <div class={{ 'upload-button': true }}>\n        <ifx-button\n          variant=\"secondary\"\n          onClick={() => this.fileInputEl?.click()}\n          disabled={this.isInputDisabled()}\n          aria-label={this.ariaLabelBrowseFiles}\n        >\n          <ifx-icon icon=\"upload-16\"></ifx-icon>\n          {this.labelBrowseFiles}\n        </ifx-button>\n        <input\n          id={this.internalId}\n          ref={handleInputRef}\n          type=\"file\"\n          accept={this.getAcceptAttribute()}\n          multiple\n          onChange={(e) => this.handleFileChange(e)}\n          style={{ display: 'none' }}\n          disabled={this.isInputDisabled()}\n          aria-label={this.ariaLabelFileInput}\n        />\n        <p class=\"file-upload-info\">\n          {this.getSupportedFileText()}\n        </p>\n        {this.renderStatusMessage()}\n      </div>\n    );\n  }\n\n\n  renderDragAndDropArea() {\n    const handleInputRef = (el: HTMLInputElement | null) => {\n      this.fileInputEl = el;\n    };\n\n    const triggerInputClick = () => {\n      if (this.fileInputEl) {\n        this.fileInputEl.click();\n      }\n    };\n\n    return (\n      <div class={{ 'disabled': this.isInputDisabled() }}>\n        <div\n          class={{ 'upload-dropzone': true, 'drag-over': this.isDragOver, 'error': this.requiredError }}\n          onClick={triggerInputClick}\n          onDragOver={(e) => this.handleDragOver(e)}\n          onDragLeave={(e) => this.handleDragLeave(e)}\n          onDrop={(e) => this.handleDrop(e)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={this.ariaLabelDropzone}\n        >\n          <ifx-icon icon=\"upload-16\" class=\"custom-icon\"></ifx-icon>\n          <p>{this.labelDragAndDrop}</p>\n          <p class=\"file-upload-info\">\n            {this.getSupportedFileText()}\n          </p>\n          <div style={{ height: '0px', overflow: 'hidden' }}>\n            <input\n              id={this.internalId}\n              ref={handleInputRef}\n              type=\"file\"\n              accept={this.getAcceptAttribute()}\n              multiple\n              onChange={(e) => this.handleFileChange(e)}\n              disabled={this.isInputDisabled()}\n              aria-label={this.ariaLabelFileInput}\n            />\n          </div>\n        </div>\n        {this.renderStatusMessage()}\n      </div>\n    );\n  }\n\n}\n"],"mappings":"iIAAA,MAAMA,EAAgB,+0FACtB,MAAAC,EAAeD,E,MCyBFE,EAAU,MALvB,WAAAC,CAAAC,G,g0BAQUC,KAAAC,YAAuB,MACvBD,KAAAE,SAAoB,MACpBF,KAAAG,SAAoB,MACpBH,KAAAI,cAAwB,EAExBJ,KAAAK,iBAAsC,CAAC,MAAO,OAAQ,MAAO,MAAO,MAAO,MAAO,OAClFL,KAAAM,2BAAiD,GAiBjDN,KAAAO,MAAgB,QAChBP,KAAAQ,mBAA6B,qCAC7BR,KAAAS,iBAA2B,eAC3BT,KAAAU,iBAA2B,wCAC3BV,KAAAW,0BAAoC,iBACpCX,KAAAY,kBAA4B,4CAC5BZ,KAAAa,yBAAmC,yBACnCb,KAAAc,cAAwB,wBACxBd,KAAAe,kBAA4B,mCAC5Bf,KAAAgB,8BAAwC,gEACxChB,KAAAiB,kBAA4B,OAC5BjB,KAAAkB,gBAA0B,QAC1BlB,KAAAmB,kBAA6B,6BAC7BnB,KAAAoB,sBAAgC,2DAEhCpB,KAAAqB,qBAA+B,eAC/BrB,KAAAsB,kBAA4B,uDAC5BtB,KAAAuB,mBAA6B,cAC7BvB,KAAAwB,oBAA8B,cAC9BxB,KAAAyB,sBAAgC,gBAChCzB,KAAA0B,qBAA+B,eAC/B1B,KAAA2B,yBAAmC,qBACnC3B,KAAA4B,wBAAkC,mBAClC5B,KAAA6B,4BAAsC,gBAGtC7B,KAAA8B,WAAa,mBAAmBC,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,KAEpElC,KAAAmC,WAAsB,MACtBnC,KAAAoC,MAAgB,GAChBpC,KAAAqC,YAA4B,GAC5BrC,KAAAsC,kBAA8B,GAC9BtC,KAAAuC,kBAA8B,GAC9BvC,KAAAwC,cAAyB,MACzBxC,KAAAyC,cAA6E,KAkB9EzC,KAAA0C,YAAuC,KAEvC1C,KAAA2C,mBAA6C,CAQnDC,IAAK,aACLC,KAAM,aACNC,IAAK,YACLC,IAAK,YACLC,IAAK,gBACLC,KAAM,aAGNC,IAAK,kBACLC,IAAK,qBACLC,KAAM,0EACNC,IAAK,2BACLC,KAAM,oEACNC,IAAK,gCACLC,KAAM,4EACNC,IAAK,aACLC,IAAK,WACLC,KAAM,mBAGNC,IAAK,aACLC,IAAK,YACLC,IAAK,YACLC,IAAK,kBACLC,KAAM,aAGNC,IAAK,kBACLC,IAAK,sBACLC,IAAK,oBACLC,GAAI,mBAGJC,IAAK,kBACLC,KAAM,YACNC,IAAK,WACLC,GAAI,yB,CA/GN,YACIC,GACF,OAAOzE,KAAK0E,S,CAEd,YAAID,CAASE,GACX,UAAWA,IAAU,UAAYA,EAAQ,EAAG,CAC1CC,QAAQC,KAAK,0DACb7E,KAAK0E,UAAYI,S,KACZ,CACL9E,KAAK0E,UAAYC,C,EAyGb,gBAAAI,G,QACN,GAAI/E,KAAKE,UAAYF,KAAKoC,MAAM4C,SAAW,EAAG,CAC5ChF,KAAKwC,cAAgB,KAErB,KAAIyC,EAAAjF,KAAKyC,iBAAa,MAAAwC,SAAA,SAAAA,EAAEC,QAASlF,KAAKQ,mBAAoB,CACxDR,KAAKyC,cAAgB,CACnB0C,KAAM,QACND,KAAMlF,KAAKQ,mB,CAIfR,KAAKoF,wBAAwBC,KAAK,CAAEC,MAAO,O,KACtC,CACLtF,KAAKwC,cAAgB,MAErB,KAAI+C,EAAAvF,KAAKyC,iBAAa,MAAA8C,SAAA,SAAAA,EAAEL,QAASlF,KAAKQ,mBAAoB,CACxDR,KAAKyC,cAAgB,I,CAGvBzC,KAAKoF,wBAAwBC,KAAK,CAAEC,MAAO,M,EAIvC,SAAAE,CAAUC,GAChB,OAAOA,IAAU,EAAIzF,KAAKiB,kBAAoBjB,KAAKkB,e,CAG7C,sBAAAwE,GACN,GAAIC,MAAMC,QAAQ5F,KAAKK,kBAAmB,CACxC,OAAOL,KAAKK,gB,CAEd,IACE,OAAOwF,KAAKC,MAAM9F,KAAKK,iB,CACvB,MAAA4E,GACA,OAAOjF,KAAKK,iBAAiB0F,MAAM,KAAKC,KAAIC,GAAKA,EAAEC,Q,EAI/C,oBAAAC,CAAqBC,GAC3B,IAAK,MAAOC,EAAKC,KAAcC,OAAOC,QAAQxG,KAAK2C,oBAAqB,CACtE,GAAI2D,IAAcF,EAAM,CACtB,OAAOC,EAAII,a,EAGf,OAAOL,C,CAGT,gBAAAM,CAAiBC,GACf,MAAMC,EAAQD,EAAME,OACpB,IAAKD,EAAMxE,MAAO,OAClBpC,KAAK8G,aAAaF,EAAMxE,M,CAG1B,UAAA2E,CAAWJ,G,MACT,GAAI3G,KAAKG,SAAU,OACnBwG,EAAMK,iBACNL,EAAMM,kBACNjH,KAAKmC,WAAa,MAClB,IAAI8C,EAAA0B,EAAMO,gBAAY,MAAAjC,SAAA,SAAAA,EAAE7C,MAAO,CAC7B,MAAM+E,EAAexB,MAAMyB,KAAKT,EAAMO,aAAa9E,OACnD,MAAMiF,EAAe,IAChBrH,KAAK0F,yBACLM,KAAIK,GAAOrG,KAAK2C,mBAAmB0D,EAAIiB,iBACvCC,OAAOC,YACPxH,KAAKyH,0BAGV,MAAMC,EAAwB,GAC9B,MAAMC,EAAwB,GAE9BR,EAAaS,SAAQC,IACnB,MAAMC,EAAcT,EAAaU,SAASF,EAAK1C,MAC/C,MAAM6C,EAAcH,EAAKI,MAAQjI,KAAKI,cAAgB,KAAO,KAC7D,GAAI0H,GAAeE,EAAaN,EAAcQ,KAAKL,QAC9CF,EAAcO,KAAKL,EAAK,IAG/B7H,KAAKmI,kBAAkB9C,KAAK,CAC1B8B,eACAO,gBACAC,kBAGF3H,KAAK8G,aAAaH,EAAMO,aAAa9E,M,EAIzC,cAAAgG,CAAezB,GACb,GAAI3G,KAAKG,SAAU,OACnBwG,EAAMK,iBACNhH,KAAKmC,WAAa,I,CAGpB,eAAAkG,CAAgB1B,GACd,GAAI3G,KAAKG,SAAU,OACnBwG,EAAMK,iBACNhH,KAAKmC,WAAa,K,CAGpB,YAAA2E,CAAawB,GACX,MAAMC,EAAgB5C,MAAMyB,KAAKkB,GACjC,MAAMjB,EAAe,IAChBrH,KAAK0F,yBACLM,KAAIK,GAAOrG,KAAK2C,mBAAmB0D,EAAIiB,iBACvCC,OAAOC,YACPxH,KAAKyH,0BAGV,MAAMe,EAAqB,GAC3B,MAAMC,EAAyB,GAC/B,MAAMC,EAAyB,GAE/BH,EAAcX,SAAQC,IACpB,MAAMC,EAAcT,EAAaU,SAASF,EAAK1C,MAC/C,MAAM6C,EAAcH,EAAKI,MAAQjI,KAAKI,cAAgB,KAAO,KAC7D,MAAMuI,EAAc3I,KAAKoC,MAAMwG,MAAKC,GAClCA,EAASC,OAASjB,EAAKiB,MAAQD,EAASZ,OAASJ,EAAKI,OAGxD,GAAIU,EAAa,CACf3I,KAAK+I,qBAAqB1D,KAAK,CAAEwC,OAAMmB,OAAQ,cAC/ChJ,KAAKiJ,mBAAmB5D,KAAK,CAC3BwC,OACAqB,UAAW,YACXC,QAAS,SAAStB,EAAKiB,yBACvBE,OAAQ,cAEV,M,CAGF,GAAIlB,GAAeE,EAAa,CAC9BQ,EAAWN,KAAKL,E,KACX,CACL,IAAKC,EAAa,CAChBY,EAAaR,KAAKL,EAAKiB,MACvB9I,KAAK+I,qBAAqB1D,KAAK,CAAEwC,OAAMmB,OAAQ,gB,CAEjD,IAAKhB,EAAa,CAChBS,EAAaP,KAAKL,EAAKiB,MACvB9I,KAAK+I,qBAAqB1D,KAAK,CAAEwC,OAAMmB,OAAQ,gB,CAEjDhJ,KAAKiJ,mBAAmB5D,KAAK,CAC3BwC,OACAqB,WAAYpB,EAAc,eAAiB,iBAC3CqB,QAAS,wBACTH,QAASlB,EAAc,mBAAqB,kB,KAKlD9H,KAAKsC,kBAAoB,IAAItC,KAAKsC,qBAAsBmG,GACxDzI,KAAKuC,kBAAoB,IAAIvC,KAAKuC,qBAAsBmG,GAExD,GAAI1I,KAAKyE,UAAYzE,KAAKoC,MAAM4C,OAASwD,EAAWxD,OAAShF,KAAKyE,SAAU,CAC1E,MAAM2E,EAAiBpJ,KAAKyE,SAAWzE,KAAKoC,MAAM4C,OAClD,MAAMqE,EAAeb,EAAWc,MAAM,EAAGvH,KAAKwH,IAAIH,EAAgB,IAClE,MAAMI,EAAgBhB,EAAWc,MAAMF,GAEvCpJ,KAAKoC,MAAQ,IAAIpC,KAAKoC,SAAUiH,GAEhCA,EAAazB,SAAQC,GAAQ7H,KAAKyJ,YAAY5B,KAE9C,GAAIwB,EAAarE,OAAS,EAAG,CAC3BhF,KAAK0J,iBAAiBrE,KAAK,CAAEsE,WAAYN,EAAcjH,MAAOpC,KAAKoC,QACnEpC,KAAK4J,oBAAoBvE,KAAK,CAAEjD,MAAOpC,KAAKoC,O,CAG9CoH,EAAc5B,SAAQC,IACpB7H,KAAK+I,qBAAqB1D,KAAK,CAAEwC,OAAMmB,OAAQ,mBAC/ChJ,KAAKiJ,mBAAmB5D,KAAK,CAC3BwC,OACAqB,UAAW,iBACXC,QAAS,8BAA8BnJ,KAAKyE,0BAC5CuE,OAAQ,kBACR,IAGJ,GAAIQ,EAAcxE,OAAS,EAAG,CAC5BhF,KAAKyC,cAAgB,CACnB0C,KAAM,QACND,KAAMlF,KAAKoB,sBACRyI,QAAQ,YAAa7J,KAAKyE,SAASxC,YACnC4H,QAAQ,YAAa7J,KAAKwF,UAAUxF,KAAKyE,YAE9CzE,KAAK8J,8BAA8BzE,KAAK,CACtCZ,SAAUzE,KAAKyE,SACfsF,UAAW/J,KAAKoC,MAAM4C,OAASwD,EAAWxD,Q,CAI9C,M,CAIFwD,EAAWZ,SAAQC,GAAQ7H,KAAKyJ,YAAY5B,KAC5C7H,KAAKoC,MAAQ,IAAIpC,KAAKoC,SAAUoG,GAEhC,GAAIA,EAAWxD,OAAS,EAAG,CACzBhF,KAAK0J,iBAAiBrE,KAAK,CAAEsE,WAAYnB,EAAYpG,MAAOpC,KAAKoC,QACjEpC,KAAK4J,oBAAoBvE,KAAK,CAAEjD,MAAOpC,KAAKoC,O,CAG9CpC,KAAK+E,kB,CAGP,WAAAiF,CAAYnC,GACV,MAAMoC,EAAYjK,KAAKqC,YAAY6H,WAAUjE,GAAKA,EAAE4B,KAAKiB,OAASjB,EAAKiB,OACvE,GAAImB,KAAe,EAAG,CACpBjK,KAAKqC,YAAY8H,OAAOF,EAAW,GACnCjK,KAAKqC,YAAc,IAAIrC,KAAKqC,Y,CAE9BrC,KAAKoK,mBAAmB/E,KAAK,CAAEwC,SAC/B7H,KAAKyJ,YAAY5B,E,CAGnB,WAAA4B,CAAY5B,GACV7H,KAAKqK,mBAAmBhF,KAAK,CAAEwC,SAE/B,MAAMyC,EAAmB,CACvBzC,OACA0C,SAAU,EACVC,WAAY,KACZC,UAAW,OAGbzK,KAAKqC,YAAc,IAAIrC,KAAKqC,YAAaiI,GAEzC,GAAItK,KAAK0K,cAAe,CACtB1K,KAAK0K,cAAc7C,GAAO8C,IACxB,GAAIA,EAAUL,EAAKC,SAAU,CAC3BD,EAAKC,SAAWxI,KAAK6I,IAAI,IAAKD,GAC9B3K,KAAKqC,YAAc,IAAIrC,KAAKqC,Y,KAE7BwI,MAAK,KACNP,EAAKC,SAAW,IAChBD,EAAKG,UAAY,KACjBzK,KAAKqC,YAAc,IAAIrC,KAAKqC,aAC5BrC,KAAK8K,sBAAsBzF,KAAK,CAAEwC,SAClC7H,KAAK4J,oBAAoBvE,KAAK,CAAEjD,MAAOpC,KAAKoC,QAE5C,GAAIpC,KAAKqC,YAAY0I,OAAM9E,GAAKA,EAAEwE,YAAY,CAC5CzK,KAAKgL,yBAAyB3F,KAAK,CAAEjD,MAAOpC,KAAKoC,O,KAElD6I,OAAM,KACPX,EAAKY,MAAQ,KACblL,KAAKqC,YAAc,IAAIrC,KAAKqC,aAC5BrC,KAAKiJ,mBAAmB5D,KAAK,CAC3BwC,OACAqB,UAAW,gBACXC,QAAS,+BACTH,OAAQ,UACR,G,KAEC,CACL,MAAMmC,EAAYtD,EAAKI,KACvB,MAAMmD,EAAkB,IACxB,IAAIC,EAAW,EAEff,EAAKE,WAAac,OAAOC,aAAY,KACnCF,GAAYD,EAAkB,EAC9B,MAAMb,EAAWxI,KAAK6I,IAAI,IAAK7I,KAAKyJ,MAAOH,EAAWF,EAAa,MACnEb,EAAKC,SAAWA,EAChBvK,KAAKqC,YAAc,IAAIrC,KAAKqC,aAE5B,GAAIkI,GAAY,IAAK,CACnBkB,cAAcnB,EAAKE,YACnBF,EAAKG,UAAY,KACjBH,EAAKE,WAAa,KAClBxK,KAAKqC,YAAc,IAAIrC,KAAKqC,aAC5BrC,KAAK8K,sBAAsBzF,KAAK,CAAEwC,SAClC7H,KAAK4J,oBAAoBvE,KAAK,CAAEjD,MAAOpC,KAAKoC,QAE5C,GAAIpC,KAAKqC,YAAY0I,OAAM9E,GAAKA,EAAEwE,YAAY,CAC5CzK,KAAKgL,yBAAyB3F,KAAK,CAAEjD,MAAOpC,KAAKoC,O,KAGpD,I,CAGLpC,KAAKqC,YAAc,IAAIrC,KAAKqC,YAAaiI,E,CAG3C,YAAAoB,CAAa7D,GACX,MAAMoC,EAAYjK,KAAKqC,YAAY6H,WAAUjE,GAAKA,EAAE4B,KAAKiB,OAASjB,EAAKiB,OACvE,GAAImB,KAAe,EAAG,CACpB,MAAMK,EAAOtK,KAAKqC,YAAY4H,GAC9B,IAAIK,IAAI,MAAJA,SAAI,SAAJA,EAAME,cAAe,KAAM,CAC7BiB,cAAcnB,EAAKE,W,CAErBxK,KAAKqC,YAAcrC,KAAKqC,YAAYkF,QAAO,CAACoE,EAAGC,IAAMA,IAAM3B,G,CAE7DjK,KAAKoC,MAAQpC,KAAKoC,MAAMmF,QAAOsE,GAAKA,EAAE/C,OAASjB,EAAKiB,OACpD9I,KAAK8L,mBAAmBzG,KAAK,CAAEwC,SAC/B7H,KAAK4J,oBAAoBvE,KAAK,CAAEjD,MAAOpC,KAAKoC,QAC5C,GAAIpC,KAAK0C,YAAa,CACpB1C,KAAK0C,YAAYiC,MAAQ,E,CAE3B3E,KAAK+E,kB,CAGP,UAAAgH,CAAWlE,G,MACT7H,KAAKqC,YAAcrC,KAAKqC,YAAYkF,QAAO+C,GAAQA,EAAKzC,KAAKiB,OAASjB,EAAKiB,OAC3E9I,KAAKoC,MAAQpC,KAAKoC,MAAMmF,QAAOsE,GAAKA,EAAE/C,OAASjB,EAAKiB,OACpD9I,KAAKgM,oBAAoB3G,KAAK,CAAE4G,YAAapE,EAAMzF,MAAOpC,KAAKoC,QAC/DpC,KAAK4J,oBAAoBvE,KAAK,CAAEjD,MAAOpC,KAAKoC,QAC5CpC,KAAK+E,mBAEL,GAAI/E,KAAK0C,YAAa,CACpB1C,KAAK0C,YAAYiC,MAAQ,E,CAG3B,GACE3E,KAAKyE,UACLzE,KAAKoC,MAAM4C,OAAShF,KAAKyE,YACzBQ,EAAAjF,KAAKyC,iBAAa,MAAAwC,SAAA,SAAAA,EAAEC,QAASlF,KAAKQ,mBAClC,CACAR,KAAKyC,cAAgB,I,EAKzB,iBAAAyJ,CAAkBC,EAAkBhH,GAClC,GAAIA,IAAS,OAAQ,CACnBnF,KAAKsC,kBAAoBtC,KAAKsC,kBAAkBiF,QAAOsE,GAAKA,IAAMM,G,KAC7D,CACLnM,KAAKuC,kBAAoBvC,KAAKuC,kBAAkBgF,QAAOsE,GAAKA,IAAMM,G,CAGpE,GAAInM,KAAK0C,YAAa,CACpB1C,KAAK0C,YAAYiC,MAAQ,E,CAG3B,GAAI3E,KAAKyE,UAAYzE,KAAKoC,MAAM4C,OAAShF,KAAKyE,SAAU,CACtDzE,KAAKyC,cAAgB,I,CAGvBzC,KAAK+E,kB,CAGP,kBAAAqH,CAAmBvE,GACjB,MAAMiB,EAAOjB,EAAKiB,KAClB,MAAMuD,EAAWvD,EAAKwD,YAAY,KAClC,GAAID,KAAc,EAAG,MAAO,CAAEE,KAAMzD,EAAMzC,IAAK,IAC/C,MAAO,CACLkG,KAAMzD,EAAK0D,UAAU,EAAGH,GACxBhG,IAAKyC,EAAK0D,UAAUH,G,CAIxB,WAAAI,CAAY5E,G,MACV,MAAM6E,GAAYzH,EAAA4C,EAAKiB,KAAK/C,MAAM,KAAK4G,SAAK,MAAA1H,SAAA,SAAAA,EAAEqC,cAC9C,OAAQoF,GACN,IAAK,MAAO,MAAO,cACnB,IAAK,MACL,IAAK,OAAQ,MAAO,cACpB,IAAK,MAAO,MAAO,cACnB,IAAK,MAAO,MAAO,cACnB,IAAK,MAAO,MAAO,cACnB,IAAK,MAAO,MAAO,cACnB,QAAS,MAAO,U,CAIpB,UAAAE,CAAWC,GACT,GAAIA,GAAS,KAAO,KAAO,KAAM,CAC/B,MAAO,IAAIA,GAAS,KAAO,KAAO,OAAOC,QAAQ,O,MAC5C,GAAID,GAAS,KAAO,KAAM,CAC/B,MAAO,IAAIA,GAAS,KAAO,OAAOC,QAAQ,O,MACrC,GAAID,GAAS,KAAM,CACxB,MAAO,IAAIA,EAAQ,MAAMC,QAAQ,O,KAC5B,CACL,MAAO,GAAGD,K,EAId,kBAAAE,GACE,MAAMC,EAAiBhN,KAAK0F,yBAAyBM,KAAIK,GAAO,IAAMA,EAAIiB,gBAC1E,MAAM2F,EAAYjN,KAAKyH,yBAEvB,MAAO,IAAIuF,KAAmBC,GAAWC,KAAK,I,CAGxC,wBAAAC,CAAyB7C,GAC/B,MAAM8C,EAAerL,KAAKyJ,MAAOlB,EAAKC,SAAW,IAAOD,EAAKzC,KAAKI,MAClE,MAAMoF,EAAerN,KAAK4M,WAAWQ,GACrC,MAAME,EAAYtN,KAAK4M,WAAWtC,EAAKzC,KAAKI,MAC5C,MAAO,GAAGoF,OAAkBC,Y,CAGtB,sBAAA7F,GACN,IAAKzH,KAAKM,2BAA4B,MAAO,GAC7C,GAAIqF,MAAMC,QAAQ5F,KAAKM,4BAA6B,OAAON,KAAKM,2BAChE,OAAON,KAAKM,2BAA2ByF,MAAM,KAAKC,KAAIC,GAAKA,EAAEC,Q,CAGvD,oBAAAqH,GACN,MAAMC,EAAaxN,KAAK0F,yBAAyBM,KAAIK,GAAOA,EAAII,gBAChE,MAAMwG,EAAYjN,KAAKyH,yBAAyBzB,KAAII,GAAQpG,KAAKmG,qBAAqBC,KACtF,MAAMqH,EAAW,IAAID,KAAeP,GACpC,MAAMS,EAAaD,EAASP,KAAK,MAEjC,IAAIhI,EAAOlF,KAAKgB,8BACb6I,QAAQ,YAAa6D,GACrB7D,QAAQ,WAAY7J,KAAKI,cAAc6B,YAE1C,GAAIjC,KAAKmB,mBAAqBnB,KAAKyE,SAAU,CAC3C,MAAMkJ,EAAW3N,KAAKwF,UAAUxF,KAAKyE,UACrC,MAAMmJ,EAAe5N,KAAKmB,kBACvB0I,QAAQ,YAAa7J,KAAKyE,SAASxC,YACnC4H,QAAQ,YAAa8D,GACxBzI,GAAQ,IAAI0I,G,CAGd,OAAO1I,C,CAGD,4BAAA2I,GACN,OAAO7N,KAAKY,kBAAkBiJ,QAAQ,WAAY7J,KAAKI,cAAc6B,W,CAG/D,mBAAA6L,GACN,IAAK9N,KAAKyC,cAAe,OAAO,KAEhC,OACEsL,EAAA,OAAKC,MAAO,0CAA0ChO,KAAKyC,cAAc0C,QACtEnF,KAAKyC,cAAc0C,OAAS,SAC3B4I,EAAA,YAAUE,KAAK,iBAEhBjO,KAAKyC,cAAcyC,K,CAKlB,eAAAgJ,GACN,OAAOlO,KAAKG,UAAaH,KAAKyE,WAAaK,WAAa9E,KAAKoC,MAAM4C,QAAUhF,KAAKyE,Q,CAGpF,iBAAA0J,GACE,IAAIC,EAAuBpO,KAAKqO,aAAc,CAC5CC,EAAe,kB,EAInB,gBAAAC,GACE,GAAIvO,KAAKqO,YAAYG,aAAa,oBAAqB,CACrDxO,KAAKyO,eAAiB,I,CAGxB,GAAIzO,KAAKyO,eAAgB,CACvBzO,KAAK0O,iB,EAMT,qBAAMA,GACJ,MAAMC,EAAe,IAAIhJ,MAAM,KAAOiJ,KAAK,KAAK1B,KAAK,IACrD,MAAM2B,EAAaF,EAAeA,EAElC,MAAMG,EAAY,IAAIC,KAAK,CAACJ,GAAe,YAAa,CAAExJ,KAAM,eAChE,MAAMkG,EAAW,IAAI0D,KAAK,CAACF,GAAa,WAAY,CAAE1J,KAAM,oBAC5D,MAAM6J,EAAS,IAAID,KAAK,CAACJ,GAAe,YAAa,CAAExJ,KAAM,4EAC7D,MAAM8J,EAAW,IAAIF,KAAK,CAACF,EAAaA,EAAaA,GAAa,YAAa,CAAE1J,KAAM,cACvF,MAAM+J,EAAc,IAAIH,KAAK,CAAC,QAAS,aAAc,CAAE5J,KAAM,6BAE7DnF,KAAKoC,MAAQ,CAACiJ,EAAUyD,EAAWE,GACnChP,KAAKqC,YAAc,CACjB,CAAEwF,KAAMwD,EAAUd,SAAU,IAAKC,WAAY,KAAMC,UAAW,MAC9D,CAAE5C,KAAMiH,EAAWvE,SAAU,GAAIC,WAAY,KAAMC,UAAW,OAC9D,CAAE5C,KAAMmH,EAAQzE,SAAU,GAAIC,WAAY,KAAMC,UAAW,MAAOS,MAAO,OAE3ElL,KAAKsC,kBAAoB,CAAC2M,EAASnG,MACnC9I,KAAKuC,kBAAoB,CAAC2M,EAAYpG,K,CAOtC,2BAAMqG,GACJnP,KAAK+E,kB,CAGT,MAAAqK,GACE,OACErB,EAAA,OAAAsB,IAAA,2CACErB,MAAO,CACL,sBAAuB,KACvB7N,SAAYH,KAAKG,WAGlBH,KAAKO,OACJwN,EAAA,SAAAsB,IAAA,2CAAOrB,MAAM,oBAAoBsB,QAAStP,KAAK8B,YAC5C9B,KAAKO,MACLP,KAAKE,UACJ6N,EAAA,QAAAsB,IAAA,2CAAMrB,MAAO,YAAYhO,KAAKwC,cAAgB,QAAU,MAAI,MAKjExC,KAAKC,YAAcD,KAAKuP,wBAA0BvP,KAAKwP,oBAEtDxP,KAAKoC,MAAM4C,OAAS,GAAKhF,KAAKsC,kBAAkB0C,OAAS,GAAKhF,KAAKuC,kBAAkByC,OAAS,IAC9F+I,EAAA,OAAAsB,IAAA,2CAAKrB,MAAM,qBACTD,EAAA,OAAAsB,IAAA,2CAAKrB,MAAM,kBAAkBhO,KAAKW,2BAClCoN,EAAA,MAAAsB,IAAA,2CAAIrB,MAAM,aACPhO,KAAKsC,kBAAkB0D,KAAImG,GAC1B4B,EAAA,MAAIC,MAAM,0BAA0BqB,IAAK,iBAAiBlD,KACxD4B,EAAA,OAAKC,MAAM,aACTD,EAAA,YAAUE,KAAK,aAEjBF,EAAA,OAAKC,MAAM,aACTD,EAAA,OAAKC,MAAM,gBACTD,EAAA,QAAMC,MAAM,qBACVD,EAAA,QAAMC,MAAM,kBAAkBhO,KAAKoM,mBAAmB,CAAEtD,KAAMqD,IAAoBI,MAClFwB,EAAA,QAAMC,MAAM,iBAAiBhO,KAAKoM,mBAAmB,CAAEtD,KAAMqD,IAAoB9F,MAEnF0H,EAAA,OAAKC,MAAM,gBACTD,EAAA,mBACE0B,MAAM,SACNC,QAAQ,WACRzB,KAAK,oBACLhG,KAAK,IAAG,aACIjI,KAAKwB,oBACjBmO,QAAS,IAAM3P,KAAKkM,kBAAkBC,EAAU,YAItD4B,EAAA,OAAKC,MAAM,mBACTD,EAAA,QAAMC,MAAM,cAAa,aAAahO,KAAKY,kBAAkBiJ,QAAQ,WAAY7J,KAAKI,cAAc6B,aACjGjC,KAAK6N,qCAOf7N,KAAKuC,kBAAkByD,KAAImG,GAC1B4B,EAAA,MAAIC,MAAM,0BAA0BqB,IAAK,iBAAiBlD,KACxD4B,EAAA,OAAKC,MAAM,aACTD,EAAA,YAAUE,KAAK,aAEjBF,EAAA,OAAKC,MAAM,aACTD,EAAA,OAAKC,MAAM,gBACTD,EAAA,QAAMC,MAAM,qBACVD,EAAA,QAAMC,MAAM,kBAAkBhO,KAAKoM,mBAAmB,CAAEtD,KAAMqD,IAAoBI,MAClFwB,EAAA,QAAMC,MAAM,iBAAiBhO,KAAKoM,mBAAmB,CAAEtD,KAAMqD,IAAoB9F,MAEnF0H,EAAA,OAAKC,MAAM,gBACTD,EAAA,mBACE0B,MAAM,SACNC,QAAQ,WACRzB,KAAK,oBACLhG,KAAK,IAAG,aACIjI,KAAKwB,oBACjBmO,QAAS,IAAM3P,KAAKkM,kBAAkBC,EAAU,YAItD4B,EAAA,OAAKC,MAAM,mBACTD,EAAA,QAAMC,MAAM,cAAa,aAAahO,KAAKa,0BACxCb,KAAKa,+BAOfb,KAAKoC,MAAM4D,KAAK6B,I,MACf,MAAMyC,EAAOtK,KAAKqC,YAAYuN,MAAK3J,GAAKA,EAAE4B,KAAKiB,OAASjB,EAAKiB,OAC7D,MAAMyB,GAAWtF,EAAAqF,IAAI,MAAJA,SAAI,SAAJA,EAAMC,YAAQ,MAAAtF,SAAA,EAAAA,EAAI,IACnC,MAAM4K,EAAcvF,IAASA,EAAKG,UAClC,MAAMqF,GAAUxF,IAAI,MAAJA,SAAI,SAAJA,EAAMY,SAAU,KAChC,MAAM6E,EAAYD,EAAU,0BAA4BD,EAAc,sBAAwB,2BAC9F,MAAMG,EAAY,GAAGnI,EAAKiB,QAAQjB,EAAKI,OACvC,MAAMsE,KAAEA,EAAIlG,IAAEA,GAAQrG,KAAKoM,mBAAmBvE,GAE9C,OACEkG,EAAA,MAAIC,MAAO+B,EAAWV,IAAKW,GACzBjC,EAAA,OAAKC,MAAM,aACTD,EAAA,YAAUE,KAAMjO,KAAKyM,YAAY5E,MAEnCkG,EAAA,OAAKC,MAAM,aACTD,EAAA,OAAKC,MAAM,gBACTD,EAAA,QAAMC,MAAM,qBACVD,EAAA,QAAMC,MAAM,kBAAkBzB,GAC9BwB,EAAA,QAAMC,MAAM,iBAAiB3H,IAE/B0H,EAAA,OAAKC,MAAM,gBACTD,EAAA,mBACE0B,MAAM,SACNC,QAAQ,WACRzB,KAAK,aACLhG,KAAK,IAAG,aACIjI,KAAK0B,qBACjBiO,QAAS,IAAM3P,KAAKgK,YAAYnC,GAChCoI,MAAO,CAAEC,QAASJ,EAAU,cAAgB,UAE9C/B,EAAA,mBACE0B,MAAM,SACNC,QAAQ,WACRzB,KAAK,WACLhG,KAAK,IAAG,aACIjI,KAAKyB,sBACjBkO,QAAS,IAAM3P,KAAK0L,aAAa7D,GACjCoI,MAAO,CAAEC,QAASL,EAAc,cAAgB,UAElD9B,EAAA,mBACE0B,MAAM,SACNC,QAAQ,WACRzB,KAAK,oBACLhG,KAAK,IAAG,aACIjI,KAAKwB,oBACjBmO,QAAS,IAAM3P,KAAK+L,WAAWlE,GAC/BoI,MAAO,CAAEC,SAAUL,EAAc,cAAgB,YAKvD9B,EAAA,OAAKC,MAAM,mBACR6B,GAAevF,IAASA,EAAKY,OAC5B6C,EAAA,QAAMC,MAAM,iBAAgB,aAAahO,KAAK2B,0BAC3C3B,KAAKmN,yBAAyB7C,KAGjCuF,IAAgBC,GAChB/B,EAAA,YACEA,EAAA,QAAMC,MAAM,aAAahO,KAAK4M,WAAW/E,EAAKI,OAC9C8F,EAAA,QAAMC,MAAM,cAAa,aAAahO,KAAK4B,yBACzCmM,EAAA,YAAUE,KAAK,aACdjO,KAAKc,gBAIXgP,GACC/B,EAAA,QAAMC,MAAM,cAAa,aAAahO,KAAK6B,6BACxC7B,KAAKe,oBAKX8O,GAAevF,IAASA,EAAKY,OAC5B6C,EAAA,OAAKC,MAAM,qBACTD,EAAA,oBACE9F,KAAK,IACLtD,MAAO4F,EAAQ,aACJ,WAKhB,M,CAUrB,gBAAAiF,GACE,MAAMW,EAAkBC,IACtBpQ,KAAK0C,YAAc0N,CAAE,EAGvB,OACErC,EAAA,OAAKC,MAAO,CAAE,gBAAiB,OAC7BD,EAAA,cACE2B,QAAQ,YACRC,QAAS,SAAA1K,EAAM,OAAAA,EAAAjF,KAAK0C,eAAW,MAAAuC,SAAA,SAAAA,EAAEoL,OAAO,EACxClQ,SAAUH,KAAKkO,kBAAiB,aACpBlO,KAAKqB,sBAEjB0M,EAAA,YAAUE,KAAK,cACdjO,KAAKS,kBAERsN,EAAA,SACEuC,GAAItQ,KAAK8B,WACTyO,IAAKJ,EACLhL,KAAK,OACLqL,OAAQxQ,KAAK+M,qBACb0D,SAAQ,KACRC,SAAWC,GAAM3Q,KAAK0G,iBAAiBiK,GACvCV,MAAO,CAAEC,QAAS,QAClB/P,SAAUH,KAAKkO,kBAAiB,aACpBlO,KAAKuB,qBAEnBwM,EAAA,KAAGC,MAAM,oBACNhO,KAAKuN,wBAEPvN,KAAK8N,sB,CAMZ,qBAAAyB,GACE,MAAMY,EAAkBC,IACtBpQ,KAAK0C,YAAc0N,CAAE,EAGvB,MAAMQ,EAAoB,KACxB,GAAI5Q,KAAK0C,YAAa,CACpB1C,KAAK0C,YAAY2N,O,GAIrB,OACEtC,EAAA,OAAKC,MAAO,CAAE7N,SAAYH,KAAKkO,oBAC7BH,EAAA,OACEC,MAAO,CAAE,kBAAmB,KAAM,YAAahO,KAAKmC,WAAY+I,MAASlL,KAAKwC,eAC9EmN,QAASiB,EACTC,WAAaF,GAAM3Q,KAAKoI,eAAeuI,GACvCG,YAAcH,GAAM3Q,KAAKqI,gBAAgBsI,GACzCI,OAASJ,GAAM3Q,KAAK+G,WAAW4J,GAC/BK,KAAK,SACLC,SAAU,EAAC,aACCjR,KAAKsB,mBAEjByM,EAAA,YAAUE,KAAK,YAAYD,MAAM,gBACjCD,EAAA,SAAI/N,KAAKU,kBACTqN,EAAA,KAAGC,MAAM,oBACNhO,KAAKuN,wBAERQ,EAAA,OAAKkC,MAAO,CAAEiB,OAAQ,MAAOC,SAAU,WACrCpD,EAAA,SACEuC,GAAItQ,KAAK8B,WACTyO,IAAKJ,EACLhL,KAAK,OACLqL,OAAQxQ,KAAK+M,qBACb0D,SAAQ,KACRC,SAAWC,GAAM3Q,KAAK0G,iBAAiBiK,GACvCxQ,SAAUH,KAAKkO,kBAAiB,aACpBlO,KAAKuB,uBAItBvB,KAAK8N,sB","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,g as i}from"./p-b7a462e5.js";import{t as r}from"./p-ccfd7ad8.js";import{i as p}from"./p-1ecafb97.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const a=c;const h=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(s[t-1]){if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){if(!p(this.el)){r("ifx-stepper")}this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}componentDidLoad(){this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"06c25996c37e26f6f5367fad2e36bfd7985bfd63","aria-label":"a stepper",role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"e3c896aedc1663060aedabe0d84d2bf899833ec9",class:"stepper-progress"},s("div",{key:"d815f2e28ededc46c07e41658c7282b9579f1897",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"734795c3c78cc849b39cff8758b2d5db9b73576d",class:`stepper-wrapper`},s("slot",{key:"504fc2c9ae3e133313216443489b9c376330d2d4"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount*100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};h.style=a;export{h as ifx_stepper};
-//# sourceMappingURL=p-52e5bb1f.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","isNestedInIfxComponent","trackComponent","componentDidLoad","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        if(!isNestedInIfxComponent(this.el)) { \n            trackComponent('ifx-stepper')\n        }\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    componentDidLoad() {\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as i,g as t}from"./p-b7a462e5.js";import{t as n}from"./p-ccfd7ad8.js";import{i as l}from"./p-1ecafb97.js";import{c as o}from"./p-5cdc6210.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.link{display:inline-flex;align-items:center;font-weight:400;font-size:1rem;text-decoration:none;color:#0A8276;gap:8px;line-height:1.6;font-family:var(--ifx-font-family)}.link:hover{cursor:pointer}.link:focus{outline-width:2px;outline-style:solid;outline-color:#0A8276;outline-offset:4px;border-radius:3px}.link.bold{font-weight:600}.link.bold:hover{text-decoration:underline}.link.bold:active{color:#08665C;font-style:normal;font-weight:600;text-decoration:underline}.link.underlined{text-decoration:underline;text-decoration-color:#0A8276;color:#1D1D1D;text-underline-offset:8px}.link.underlined:hover{color:#0A8276}.link.underlined:active{color:#0A8276}.link.underlined:disabled,.link.underlined.disabled{text-decoration-color:#BFBBBB}.link.title{text-decoration:none;font-weight:600;color:#1D1D1D}.link.title:hover{color:#0A8276}.link.title:active{color:#08665C}.link.menu{font-weight:400;font-style:normal;line-height:26px;color:#1D1D1D}.link.menu:hover{color:#0A8276}.link.menu:active{color:#08665C}.link.small{font-size:0.875rem}.link.medium{font-size:1rem}.link.large{font-size:1.125rem}.link.extraLarge{font-size:1.25rem}.link.underline{text-decoration:underline}.link:disabled,.link.disabled{color:#BFBBBB;cursor:default;pointer-events:none}';const s=r;const d=class{constructor(i){e(this,i);this.href=undefined;this.target="_self";this.variant="bold";this.disabled=false;this.internalHref="";this.internalTarget="";this.internalVariant=""}setInternalStates(){if(this.href){this.internalHref=this.href.trim()}else{this.internalHref=undefined}this.internalTarget=this.target.trim();this.internalVariant=this.variant.trim().toLowerCase()}componentWillRender(){this.setInternalStates()}handleKeyDown(e){if(this.disabled){e.preventDefault()}else if(e.key==="Enter"){e.preventDefault()}}componentWillLoad(){if(!l(this.el)){n("ifx-link")}}render(){return i("a",{key:"34501f54b71028a9886ba198979aa55f88171921",role:"link","aria-label":this.ariaLabel,"aria-disabled":this.disabled||!this.internalHref,href:this.disabled?undefined:this.internalHref,download:this.download,target:this.internalTarget,class:this.linkClassNames()},i("slot",{key:"5d1e1ff267036c8dfc2fbef139db404d9edf4300"}))}getSizeClass(){const e=this.size==="s"?"small":null;const i=this.size==="m"?"medium":null;const t=this.size==="l"?"large":null;const n=this.size==="xl"?"extraLarge":null;if(e){return e}else if(i){return i}else if(t){return t}else if(n&&this.internalVariant==="underlined"){return"large"}else if(n&&this.internalVariant!=="underlined"){return n}else return""}getVariantClass(){const e=this.internalVariant==="bold"?"bold":null;const i=this.internalVariant==="title"?"title":null;const t=this.internalVariant==="underlined"?"underlined":null;const n=this.internalVariant==="menu"?"menu":null;if(e){return e}else if(i){return i}else if(t){return t}else if(n){return n}else return e}linkClassNames(){return o("link","primary",this.getVariantClass(),this.getSizeClass(),this.disabled?"disabled":"")}get el(){return t(this)}};d.style=s;export{d as ifx_link};
-//# sourceMappingURL=p-5c67b3bc.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["linkCss","IfxLinkStyle0","Link","constructor","hostRef","this","href","undefined","target","variant","disabled","internalHref","internalTarget","internalVariant","setInternalStates","trim","toLowerCase","componentWillRender","handleKeyDown","event","preventDefault","key","componentWillLoad","isNestedInIfxComponent","el","trackComponent","render","h","role","ariaLabel","download","class","linkClassNames","getSizeClass","small","size","medium","large","extraLarge","getVariantClass","bold","title","underlined","menu","classNames"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  text-decoration: none;\n  color: tokens.$ifxColorOcean500;\n  gap: tokens.$ifxSpace100;\n  line-height: 1.6;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover { \n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: #0A8276;\n    outline-offset: 4px;\n    border-radius: 3px;\n  }\n\n  &.bold {\n    font-weight: tokens.$ifxFontWeightSemibold;\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: #08665C;\n      font-style: normal;\n      font-weight: 600;\n      text-decoration: underline;\n    }\n\n  }\n\n  &.underlined {\n    text-decoration: underline;\n    text-decoration-color: tokens.$ifxColorOcean500;\n    color: #1D1D1D;\n    text-underline-offset: 8px;\n    \n    &:hover {\n      color: tokens.$ifxColorOcean500;;\n    }\n    \n    &:active {\n      color: #0A8276;\n    }\n\n    &:disabled,\n    &.disabled {\n      text-decoration-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.title {\n    text-decoration: none;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.menu {\n    font-weight: 400;\n    font-style: normal;\n    line-height: 26px;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.small {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  &.medium {\n    font-size: tokens.$ifxFontSizeM;\n  }\n\n  &.large {\n    font-size: tokens.$ifxFontSizeL;\n  }\n\n  &.extraLarge {\n    font-size: tokens.$ifxFontSizeXl;\n  }\n\n  &.underline {\n    text-decoration: underline;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    cursor: default;\n    pointer-events:  none;\n  }\n\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Element() el;\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @Prop() ariaLabel: string | null;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n    }\n  }\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-link')\n    }\n  }\n\n  render() {\n    return (\n      <a\n        role=\"link\"\n        aria-label={this.ariaLabel}\n        aria-disabled={this.disabled || !this.internalHref}\n        href={this.disabled ? undefined : this.internalHref}\n        download={this.download}\n        target={this.internalTarget}\n        class={this.linkClassNames()}>\n        <slot></slot>\n      </a>)\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}"],"mappings":"8JAAA,MAAMA,EAAU,6zCAChB,MAAAC,EAAeD,E,MCUFE,EAAI,MANjB,WAAAC,CAAAC,G,UAQUC,KAAAC,KAAeC,UACfF,KAAAG,OAAiB,QACjBH,KAAAI,QAAkB,OAElBJ,KAAAK,SAAoB,MAGnBL,KAAAM,aAAsB,GACtBN,KAAAO,eAAyB,GACzBP,KAAAQ,gBAA0B,E,CAEnC,iBAAAC,GACE,GAAGT,KAAKC,KAAK,CACXD,KAAKM,aAAeN,KAAKC,KAAKS,M,KAC3B,CACHV,KAAKM,aAAeJ,S,CAEtBF,KAAKO,eAAiBP,KAAKG,OAAOO,OAClCV,KAAKQ,gBAAkBR,KAAKI,QAAQM,OAAOC,a,CAG7C,mBAAAC,GACEZ,KAAKS,mB,CAGP,aAAAI,CAAcC,GACZ,GAAId,KAAKK,SAAU,CACjBS,EAAMC,gB,MACD,GAAID,EAAME,MAAQ,QAAS,CAChCF,EAAMC,gB,EAIV,iBAAAE,GACE,IAAIC,EAAuBlB,KAAKmB,IAAK,CACnCC,EAAe,W,EAInB,MAAAC,GACE,OACEC,EAAA,KAAAN,IAAA,2CACEO,KAAK,OAAM,aACCvB,KAAKwB,UAAS,gBACXxB,KAAKK,WAAaL,KAAKM,aACtCL,KAAMD,KAAKK,SAAWH,UAAYF,KAAKM,aACvCmB,SAAUzB,KAAKyB,SACftB,OAAQH,KAAKO,eACbmB,MAAO1B,KAAK2B,kBACZL,EAAA,QAAAN,IAAA,6C,CAIN,YAAAY,GACE,MAAMC,EAAQ7B,KAAK8B,OAAS,IAAM,QAAU,KAC5C,MAAMC,EAAS/B,KAAK8B,OAAS,IAAM,SAAW,KAC9C,MAAME,EAAQhC,KAAK8B,OAAS,IAAM,QAAU,KAC5C,MAAMG,EAAajC,KAAK8B,OAAS,KAAO,aAAe,KAEvD,GAAID,EAAO,CACT,OAAOA,C,MACF,GAAIE,EAAQ,CACjB,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,GAAcjC,KAAKQ,kBAAoB,aAAc,CAC9D,MAAO,O,MACF,GAAIyB,GAAcjC,KAAKQ,kBAAoB,aAAc,CAC9D,OAAOyB,C,MACF,MAAO,E,CAGhB,eAAAC,GACE,MAAMC,EAAOnC,KAAKQ,kBAAoB,OAAS,OAAS,KACxD,MAAM4B,EAAQpC,KAAKQ,kBAAoB,QAAU,QAAU,KAC3D,MAAM6B,EAAarC,KAAKQ,kBAAoB,aAAe,aAAe,KAC1E,MAAM8B,EAAOtC,KAAKQ,kBAAoB,OAAS,OAAS,KAExD,GAAI2B,EAAM,CACR,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,EAAY,CACrB,OAAOA,C,MACF,GAAIC,EAAM,CACf,OAAOA,C,MACF,OAAOH,C,CAGhB,cAAAR,GACE,OAAOY,EACL,OACA,UACAvC,KAAKkC,kBACLlC,KAAK4B,eACL5B,KAAKK,SAAW,WAAa,G","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-b7a462e5.js";import{t as a}from"./p-ccfd7ad8.js";import{i as r}from"./p-1ecafb97.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const h=n;const d=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(!r(this.el)){a("ifx-slider")}if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}componentDidLoad(){this.updateValuePercent()}render(){return t("div",{key:"b0fb157c18dad8390958bda3f1578082b28a85df",class:"ifx-slider"},this.leftText&&t("span",{key:"952fef0d00d49f93cf0481d13152fb5927d4944b",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"7fd0379e54ba8e4d74c01305a808850f85278988",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"a slider","aria-value":this.value,"aria-disabled":this.disabled}):t("div",{class:"range-slider__wrapper","aria-label":"a range slider","aria-value":this.value,"aria-disabled":this.disabled},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e)})),this.rightIcon&&t("ifx-icon",{key:"620761fefb91d14646333196e8fdbe26bfbffea8",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"6c83f7ab6a2f55dafab518e99113a983cc3ebfbf",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"5e5b5df15316e3c41534555ff94bde9c4c0385d2",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};d.style=h;export{d as ifx_slider};
-//# sourceMappingURL=p-63e38518.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSliderStyle0","IfxSlider","constructor","hostRef","this","min","max","step","disabled","showPercentage","type","internalValue","percentage","internalMinValue","internalMaxValue","valueChanged","newValue","updateValuePercent","minValueChanged","maxValueChanged","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","den","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","isNestedInIfxComponent","trackComponent","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","render","h","key","class","leftText","leftIcon","icon","ref","onInput","onMouseUp","rightIcon","rightText"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';  \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-slider')\n    }\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,a as n,g as i}from"./p-b7a462e5.js";import{t as a}from"./p-ccfd7ad8.js";import{i as s}from"./p-1ecafb97.js";function r(e,t,o,n=20,i=0){const a=[];if(i>=n){return a}const s=e=>{const a=e.assignedNodes().filter((e=>e.nodeType===1));if(a.length>0){const e=a[0].parentElement;return r(e,t,o,n,i+1)}return[]};const d=Array.from(e.children||[]);for(const e of d){if(t(e)){continue}if(o(e)){a.push(e)}if(e.shadowRoot!=null){a.push(...r(e.shadowRoot,t,o,n,i+1))}else if(e.tagName==="SLOT"){a.push(...s(e))}else{a.push(...r(e,t,o,n,i+1))}}return a}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function c(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function l(e){if(e.getAttribute("tabindex")==="-1"||d(e)||c(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function f(e,t,o){const n=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));n.addEventListener("finish",(()=>{n.commitStyles();n.cancel()}));return n}const h={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const b={fadeIn:[Object.assign(Object.assign({offset:0},h),{opacity:0}),Object.assign(Object.assign({offset:1},h),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},h),{opacity:1}),Object.assign(Object.assign({offset:1},h),{opacity:0})]};const m=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const u=m;const p=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentWillLoad(){if(!s(this.hostElement)){a("ifx-modal")}}componentDidLoad(){this.focusableElements=r(this.hostElement.shadowRoot,(e=>d(e)||e.matches("[data-focus-trap-edge]")),l)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=f(this.modalContainer,b.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=f(this.modalContainer,b.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){return new Promise((e=>{setTimeout((()=>{const t=this.hostElement.shadowRoot.querySelector(".modal-content");const o=t.offsetHeight;const n=window.innerHeight;e(o>=n*.9)}),100)}))}render(){const e=this.variant!=="default";return o(n,{key:"a708fd0da720aedaa40a0142146a026fa198e0bc"},o("div",{key:"2249783645e2856011e24a5e48fa43623e47c151",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"e80787c6ae011341234462185588b61e0699cc05",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"17e8a1e8fd121d45a2eb1e3b5ea815bd3e50c516","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"5b24d3bbc6d50a2e70aaa908e8b56207c6b535d6",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"7679ea4179f66915dd510f6b7c6c1c3e6d7869b8",class:"modal-content"},o("div",{key:"8ccb69bd7dd3229ce8ca0acd1b764a74e61e13bc",class:"modal-header"},o("h2",{key:"1f4c9699d3bfeaaf569a7f5fc97facabbc1e2b4a",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"2f3cb76f3775319ed4e5d745f014bc2062d9e872",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"4ed7e3019673dab1076db0b109badbc1e50fd02d",class:"modal-body"},o("slot",{key:"433d2413fa057aaa38357456958fe41175bd2061",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"4c2ea669417446d15cb13bc83ee6f7878b8ab211",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"f680cfeeccb82a7f69d0e1efaa6bb68d4c25fe18",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"c9e1fa9d91f31453a33b2b30b0c979de00c06827","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return i(this)}static get watchers(){return{opened:["openedChanged"]}}};p.style=u;export{p as ifx_modal};
-//# sourceMappingURL=p-69295f7e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentWillLoad","isNestedInIfxComponent","hostElement","trackComponent","componentDidLoad","el","componentWillRender","handleComponentOverflow","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","Promise","resolve","modalContent","modalContentHeight","offsetHeight","viewportHeight","window","innerHeight","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  \n  //overflow: hidden;\n\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n.modal-content-container {\n  &.no-overflow { \n    overflow: hidden;\n    & .modal-body { \n      overflow-y: auto;\n    }\n  }\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  \n  //overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentWillLoad() { \n    if(!isNestedInIfxComponent(this.hostElement)) { \n      trackComponent('ifx-modal')\n    }\n  }\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n  }\n\n  componentWillRender() { \n    if(this.showModal) { \n      this.handleComponentOverflow();\n    }\n  }\n\n  handleComponentOverflow() { \n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n    if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n      modalContentContainer.classList.add('no-overflow')\n    } else if(modalContentContainer?.classList.contains('no-overflow')) { \n      modalContentContainer?.classList.remove('no-overflow')\n    }\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n    }\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n  handleContentUpdate(e) {\n  const slotElement = e.target;\n  const nodes = slotElement.assignedNodes();\n  if(nodes.length > 0) {\n    nodes.forEach(node => {\n      if (node.observer) {\n        node.observer.disconnect();\n        delete node.observer;\n      }\n      const observer = new MutationObserver((mutationsList, _) => {\n        for(let mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            if(this.showModal) { \n              this.handleComponentOverflow();\n            }\n          }\n        }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n        node.observer = observer;\n      });\n    } \n  }\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n isModalContentContainerHeightReachedViewport() {\n  //Adding timeout for proper height detection on Edge browser\n  return new Promise(resolve => {\n    setTimeout(() => {\n      const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n      const modalContentHeight = modalContent.offsetHeight;\n      const viewportHeight = window.innerHeight;\n      resolve(modalContentHeight >= viewportHeight * 0.9);\n    }, 100);\n  });\n}\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,a,g as s}from"./p-b7a462e5.js";import{t as i}from"./p-ccfd7ad8.js";import{i as o}from"./p-1ecafb97.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}';const p=l;const h=class{constructor(r){e(this,r);this.ifxInput=t(this,"ifxInput",7);if(r.$hostElement$["s-ei"]){this.internals=r.$hostElement$["s-ei"]}else{this.internals=r.$hostElement$.attachInternals();r.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++d}`;this.disabled=false;this.error=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const t=this.fullWidth.toLowerCase()==="true";if(t){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea();this.internals.setFormValue("")}handleOnInput(e){this.value=e.target.value;this.internals.setFormValue(this.value);this.ifxInput.emit(this.value)}resetTextarea(){this.value="";this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){if(!o(this.el)){i("ifx-textarea")}this.internals.setFormValue(this.value)}render(){var e,t;return r(a,{key:"bc9d09172ecd2e37fe29d5d9306444082be822be",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled?"disabled":""}`},r("label",{key:"2e3f99f22d31ce9ed590a54e61ebbd665e51e6c5",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),r("div",{key:"8e42f986e8ed5ddc4576ee189dbbc3a339bf34e8",class:"wrapper__textarea"},r("textarea",{key:"8e77103054bcec7bd9cd081398843296244c7135","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled,id:this.inputId,style:{resize:this.resize},name:this.name?this.name:this.inputId,cols:this.cols,rows:this.rows,maxlength:this.maxlength,wrap:this.wrap,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((t=this.caption)===null||t===void 0?void 0:t.trim())&&r("div",{key:"88e8fc5eb738e497250a761888652207268dc49e",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}get el(){return s(this)}};let d=0;h.style=p;export{h as ifx_textarea};
-//# sourceMappingURL=p-7b415a6b.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","isNestedInIfxComponent","trackComponent","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n    if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n    } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n    }\n  }\n\n\tcomponentDidRender() {\n    this.handleComponentWidth()\n  }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\ttrackComponent('ifx-textarea')\n\t\t}\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"mIAAA,MAAMA,EAAc,glCACpB,MAAAC,EAAeD,E,MCUFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,OACfP,KAAAQ,UAAoB,O,CAG7C,WAAMC,GACLT,KAAKU,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBZ,KAAKa,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAchB,KAAKQ,UAAUS,gBAAkB,OAEnD,GAAID,EAAa,CAClBJ,EAAgBM,UAAUC,IAAI,Y,MACtB,GAAGP,EAAgBM,UAAUE,SAAS,aAAc,CAC5DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACGtB,KAAKW,sB,CAGR,iBAAAY,GACCvB,KAAKU,gBACLV,KAAKwB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb3B,KAAK4B,MAASD,EAAEE,OAA+BD,MAC/C5B,KAAKwB,UAAUC,aAAazB,KAAK4B,OACjC5B,KAAK8B,SAASC,KAAK/B,KAAK4B,M,CAGzB,aAAAlB,GACCV,KAAK4B,MAAQ,GACb5B,KAAKwB,UAAUQ,YAAY,IAC3BhC,KAAKwB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACC,IAAIC,EAAuBlC,KAAKa,IAAK,CACpCsB,EAAe,e,CAEhBnC,KAAKwB,UAAUC,aAAazB,KAAK4B,M,CAGlC,MAAAQ,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAYxC,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAY,MAC1FkC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAUzC,KAAKC,UAC1CyC,EAAA1C,KAAK2C,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVvC,KAAK4B,MAAK,gBACP5B,KAAKG,SACrB0C,GAAK7C,KAAKC,QACV6C,MAAQ,CAACxC,OAAQN,KAAKM,QACtByC,KAAO/C,KAAK+C,KAAO/C,KAAK+C,KAAO/C,KAAKC,QACpC+C,KAAOhD,KAAKgD,KACZC,KAAOjD,KAAKiD,KACZC,UAAYlD,KAAKkD,UACjB3C,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChBgD,SAAWnD,KAAKK,SAChB+C,YAAcpD,KAAKoD,YACnBxB,MAAQ5B,KAAK4B,MACbyB,QAAW1B,GAAM3B,KAAK0B,cAAcC,QAIpC2B,EAAAtD,KAAKuD,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRxC,KAAKuD,QAAQX,Q,mEAQrB,IAAI1C,EAAa,E","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as a,c as s,h as r,g as e}from"./p-b7a462e5.js";import{t as i}from"./p-ccfd7ad8.js";import{i as t}from"./p-1ecafb97.js";const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{width:100%;display:flex}.search-bar{box-sizing:border-box;height:40px;background-color:#FFFFFF;display:flex;flex-direction:row;align-items:center;width:100%;font-family:var(--ifx-font-family)}.search-bar.closed{display:flex;width:auto;justify-content:flex-start}.search-bar .search-bar-wrapper{display:flex;align-items:center;gap:16px;width:100%}.search-bar .search-bar-wrapper a{text-decoration:none;font-size:1rem;font-style:normal;font-weight:600;line-height:1.5rem;color:#0A8276;cursor:pointer}.search-bar .search-bar-wrapper ifx-search-field{width:100%}.search-bar .search-bar__icon-wrapper{display:none;flex-direction:row;align-items:center}.search-bar .search-bar__icon-wrapper ifx-icon:hover{cursor:pointer}.search-bar.closed .search-bar__icon-wrapper{display:flex}.search-bar.closed .search-bar-wrapper{display:none}';const c=h;const o=class{constructor(r){a(this,r);this.ifxInput=s(this,"ifxInput",7);this.ifxOpen=s(this,"ifxOpen",7);this.isOpen=true;this.disabled=false;this.autocomplete="on";this.handleCloseButton=()=>{this.internalState=!this.internalState;this.ifxOpen.emit(this.internalState)};this.handleFocus=()=>{this.internalState=true}}async onNavbarMobile(){this.ifxOpen.emit(false);this.internalState=false}handlePropChange(){this.internalState=this.isOpen}setInitialState(){this.internalState=this.isOpen}componentWillLoad(){if(!t(this.el)){i("ifx-search-bar")}this.setInitialState();this.ifxOpen.emit(this.internalState)}handleInput(a){this.value=a.detail}render(){return r("div",{key:"009aaf2c7ebf970a368f888f8104b47e1c5cca18","aria-label":"a search bar","aria-disabled":this.disabled,class:`search-bar ${this.internalState?"open":"closed"}`},this.internalState?r("div",{class:"search-bar-wrapper"},r("ifx-search-field",{autocomplete:this.autocomplete,disabled:this.disabled,value:this.value,maxlength:this.maxlength,onIfxInput:this.handleInput.bind(this)},r("ifx-icon",{icon:"search-16",slot:"search-icon"})),r("a",{tabindex:"-1",href:"javascript:void(0)",onClick:this.handleCloseButton},"Close")):r("div",{class:"search-bar__icon-wrapper",onClick:this.handleCloseButton},r("ifx-icon",{icon:"search-16"})))}get el(){return e(this)}static get watchers(){return{isOpen:["handlePropChange"]}}};o.style=c;export{o as ifx_search_bar};
-//# sourceMappingURL=p-7c876fdc.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["searchBarCss","IfxSearchBarStyle0","SearchBar","constructor","hostRef","this","isOpen","disabled","autocomplete","handleCloseButton","internalState","ifxOpen","emit","handleFocus","onNavbarMobile","handlePropChange","setInitialState","componentWillLoad","isNestedInIfxComponent","el","trackComponent","handleInput","event","value","detail","render","h","key","class","maxlength","onIfxInput","bind","icon","slot","tabindex","href","onClick"],"sources":["src/components/search-bar/search-bar.scss?tag=ifx-search-bar&encapsulation=shadow","src/components/search-bar/search-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  width: 100%; //revert\n  display: flex;\n}\n\n.search-bar {\n  box-sizing: border-box;\n  height: tokens.$ifxSize500;\n  background-color: tokens.$ifxColorBaseWhite;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.closed {\n    display: flex;\n    width: auto;\n    justify-content: flex-start;\n  }\n\n  & .search-bar-wrapper {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace200;\n    width: 100%;\n\n    & a {\n      text-decoration: none;\n      font-size: tokens.$ifxFontSizeM;\n      font-style: normal;\n      font-weight: tokens.$ifxFontWeightSemibold;\n      line-height: tokens.$ifxLineHeightM;\n      color: tokens.$ifxColorOcean500;\n      cursor: pointer;\n    }\n\n    & ifx-search-field {\n      width: 100%;\n    }\n  }\n\n  .search-bar__icon-wrapper {\n    display: none;\n    flex-direction: row;\n    align-items: center;\n\n    & ifx-icon:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.closed {\n    .search-bar__icon-wrapper {\n      display: flex;\n    }\n\n    .search-bar-wrapper {\n      display: none;\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n   @Prop() autocomplete: string = \"on\";\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  componentWillLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      trackComponent('ifx-search-bar')\n    }\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field autocomplete={this.autocomplete} disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAe,+3BACrB,MAAAC,EAAeD,E,MCQFE,EAAS,MALtB,WAAAC,CAAAC,G,8EAMUC,KAAAC,OAAkB,KAClBD,KAAAE,SAAoB,MAMnBF,KAAAG,aAAuB,KAchCH,KAAAI,kBAAoB,KAClBJ,KAAKK,eAAiBL,KAAKK,cAC3BL,KAAKM,QAAQC,KAAKP,KAAKK,cAAc,EAmBvCL,KAAAQ,YAAc,KACZR,KAAKK,cAAgB,IAAI,C,CAhC3B,oBAAMI,GACJT,KAAKM,QAAQC,KAAK,OAClBP,KAAKK,cAAgB,K,CAIvB,gBAAAK,GACEV,KAAKK,cAAgBL,KAAKC,M,CAQ5B,eAAAU,GACEX,KAAKK,cAAgBL,KAAKC,M,CAG5B,iBAAAW,GACE,IAAIC,EAAuBb,KAAKc,IAAK,CACnCC,EAAe,iB,CAEjBf,KAAKW,kBACLX,KAAKM,QAAQC,KAAKP,KAAKK,c,CAGzB,WAAAW,CAAYC,GACVjB,KAAKkB,MAAQD,EAAME,M,CAQrB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,eAAc,gBAAgBtB,KAAKE,SAAUqB,MAAO,cAAcvB,KAAKK,cAAgB,OAAS,YAC7GL,KAAKK,cACJgB,EAAA,OAAKE,MAAM,sBACTF,EAAA,oBAAkBlB,aAAcH,KAAKG,aAAcD,SAAUF,KAAKE,SAAUgB,MAAOlB,KAAKkB,MAAOM,UAAWxB,KAAKwB,UAAWC,WAAYzB,KAAKgB,YAAYU,KAAK1B,OAC1JqB,EAAA,YAAUM,KAAK,YAAYC,KAAK,iBAGlCP,EAAA,KAAGQ,SAAS,KAAKC,KAAK,qBAAqBC,QAAS/B,KAAKI,mBAAiB,UAG5EiB,EAAA,OAAKE,MAAM,2BAA2BQ,QAAS/B,KAAKI,mBAClDiB,EAAA,YAAUM,KAAK,e","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,g as i,c as r}from"./p-b7a462e5.js";import{t as n}from"./p-ccfd7ad8.js";import{i as o}from"./p-1ecafb97.js";import{c as s}from"./p-5cdc6210.js";const a=":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.border.inverted{border-top-color:#FFFFFF;border-left-color:#FFFFFF;border-right-color:#FFFFFF}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor svg{fill:#0A8276}.semiconductor.inverted svg{fill:#FFFFFF}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";const p=a;const l=class{constructor(e){t(this,e);this.inverted=false}componentWillLoad(){if(!o(this.el)){n("ifx-spinner")}}render(){return e("div",{key:"b1a96e623d8f4057b7c6f667c4ab85032f5cb667","aria-label":"spinner indicating a loading process",class:this.getClassNames()},e("div",{key:"77b0c7ab5cbbaa2ce571bcbfdd06153f8ec12a23",class:`${this.variant!=="brand"?"border":""} ${this.inverted?"inverted":""}`}),this.variant==="brand"&&e("div",{key:"a67b8a9fb4d6188716d9fc9983890327dbe4581c",class:`semiconductor ${this.inverted?"inverted":""} ${this.getSizeClass()}`},e("svg",{key:"0f2517eee997ba1a00e8d4190d3b0cfbbfcdb180",width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("g",{key:"ff61c4a88cac5c686427097937f62bafc7b07bb1",id:"spinner/conductor"},e("path",{key:"b85807f5170e22366d7eb19cdf3ad4006d4854db",id:"Vector",d:"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z"})))))}getSizeClass(){return`${this.size}`==="s"?"s":""}getClassNames(){return s("spinner",this.size&&`spinner ${this.getSizeClass()}`)}get el(){return i(this)}};l.style=p;const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}';const d=c;const h=class{constructor(e){t(this,e);this.ifxInput=r(this,"ifxInput",7);if(e.$hostElement$["s-ei"]){this.internals=e.$hostElement$["s-ei"]}else{this.internals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.internals}this.placeholder="Placeholder";this.value="";this.error=false;this.label="";this.icon="";this.caption="";this.size="m";this.required=false;this.optional=false;this.success=false;this.disabled=false;this.showDeleteIcon=false;this.autocomplete="on";this.type="text";this.internalId="text-field"}valueWatcher(t){if(t!==this.inputElement.value){this.inputElement.value=t}}async reset(){this.value="";this.inputElement.value=""}handleDeleteContent(){this.reset();this.ifxInput.emit(this.value)}handleInput(){const t=this.inputElement.value;this.value=t;this.internals.setFormValue(t);this.ifxInput.emit(this.value)}handleTypeProp(){this.internalType=this.type==="text"||this.type==="password"?this.type:"text"}formResetCallback(){this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){if(!o(this.el)){n("ifx-text-field")}this.handleTypeProp()}render(){return e("div",{key:"99622bdc18742234932ca14639eb1aa2b93cc5b8","aria-label":"a text field for user input","aria-value":this.value,"aria-disabled":this.disabled,class:`textInput__container ${this.disabled?"disabled":""}`},e("div",{key:"0f77417c6e2ccb01e69e4dae336e25e64f38a9d3",class:"textInput__top-wrapper"},e("label",{key:"11de39e8c23d97686bcc9f401d2e13c3c2575d3e",htmlFor:this.internalId},e("slot",{key:"1b939f2a66bd6a3e2216c834107e60bd7995de5c"}),this.optional&&this.required?e("span",{class:"optional-required"},"(optional) *"):this.optional?e("span",{class:"optional"},"(optional)"):this.required?e("span",{class:`required ${this.error?"error":""}`},"*"):null)),e("div",{key:"f345d927cb20d5187a9b1c4d4811ab15fdf8c8f1",class:"textInput__bottom-wrapper"},e("div",{key:"15c0688ace07d7d4fda2fdf2fa1b6272f87ea535",class:"input-container"},this.icon&&e("ifx-icon",{key:"bc6527885448964fd3e2b058de11e31fcd36b737",class:"input-icon",icon:this.icon}),e("input",{key:"135fc224592a41faa10fe8884c1ea7e8869bbfcb",ref:t=>this.inputElement=t,disabled:this.disabled,autocomplete:this.autocomplete,type:this.internalType,id:this.internalId,value:this.value,onInput:()=>this.handleInput(),placeholder:this.placeholder,maxlength:this.maxlength,class:`${this.icon?"icon":""}\n                ${this.error?"error":""} \n              ${this.size==="s"?"input-s":""}\n              ${this.success?"success":""}`}),this.showDeleteIcon&&this.value&&e("ifx-icon",{key:"cee994abe371690c292cf2cca8f71631d895da8e",class:"delete-icon",icon:"cRemove16",onClick:()=>this.handleDeleteContent()})),this.caption&&!this.error&&e("div",{key:"bc1c9b96f0b0d5a0973d8d5ee863687a63c4a727",class:`textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""`},this.caption),this.error&&e("div",{key:"65ee15f056cb02ccaae9c2299303f3938c0dd396",class:"textInput__bottom-wrapper-caption error"},this.caption)))}static get formAssociated(){return true}get el(){return i(this)}static get watchers(){return{value:["valueWatcher"]}}};h.style=d;export{l as ifx_spinner,h as ifx_text_field};
-//# sourceMappingURL=p-83672d21.entry.js.map