@limetech/lime-elements 37.76.3 → 37.78.0

package/dist/lime-elements/{p-488decb0.entry.js → p-17da2b0a.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,g as o}from"./p-443111b3.js";import{t as r}from"./p-8915fa60.js";function s(t,e){const i=t||e;if(!i){return"unknown"}const o=i.split(".").pop().toLowerCase();const r={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return r[o]||"unknown"}class n{constructor(t){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const t=window.document;const e=t.fullscreenElement||t.mozFullScreenElement||t.webkitFullscreenElement||t.msFullscreenElement;if(e){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=t.requestFullscreen||t.msRequestFullscreen||t.mozRequestFullScreen||t.webkitRequestFullscreen;this.enter=this.enter.bind(t);const e=window.document;this.exit=e.exitFullscreen||e.msExitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const a='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support .icon--warning{color:rgb(var(--color-orange-default))}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const l=class{constructor(o){t(this,o);this.action=e(this,"action",7);this.renderPdf=()=>[i("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),i("iframe",{src:this.fileUrl,loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),i("img",{src:this.fileUrl,alt:this.alt,loading:"lazy"})];this.renderVideo=()=>i("video",{controls:true},i("source",{src:this.fileUrl}));this.renderAudio=()=>i("audio",{controls:true},i("source",{src:this.fileUrl}));this.renderText=()=>[this.renderButtons(),i("object",{data:this.fileUrl,type:"text/plain"})];this.renderOffice=()=>[i("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),i("iframe",{src:this.getOfficeViewerUrl()+this.fileUrl+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const t={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return t[this.officeViewer]};this.renderNoFileSupportMessage=()=>i("div",{class:"no-support"},i("limel-icon",{class:"icon--warning",name:"brake_warning",size:"large",role:"presentation"}),i("p",null,this.getTranslation("message.unsupported-filetype")),this.renderDownloadButton());this.renderButtons=()=>i("div",{class:"buttons"},this.renderActionMenu(),this.renderToggleFullscreenButton(),this.renderDownloadButton(),this.renderOpenInNewTabButton());this.renderToggleFullscreenButton=()=>{if(!this.allowFullscreen||!this.fullscreen.isSupported()){return}const t=this.isFullscreen?"multiply":"fit_to_width";const e=this.isFullscreen?this.getTranslation("exit-fullscreen"):this.getTranslation("open-in-fullscreen");return[i("button",{class:"button--toggle-fullscreen",id:"tooltip-toggle-fullscreen",role:"button",onClick:this.handleToggleFullscreen},i("limel-icon",{name:t}),i("limel-tooltip",{label:e,elementId:"tooltip-toggle-fullscreen",openDirection:"left"}))]};this.renderDownloadButton=()=>{if(!this.allowDownload||this.isFullscreen){return}return i("a",{class:"button--download",id:"tooltip-download",role:"button",download:this.filename?this.filename:"",href:this.fileUrl,target:"_blank"},i("limel-icon",{name:"download_2"}),i("limel-tooltip",{label:this.getTranslation("download"),elementId:"tooltip-download",openDirection:"left"}))};this.renderOpenInNewTabButton=()=>{if(!this.allowOpenInNewTab||this.isFullscreen){return}return i("a",{class:"button--new-tab",id:"tooltip-new-tab",role:"button",href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},i("limel-icon",{name:"external_link"}),i("limel-tooltip",{label:this.getTranslation("open-in-new-tab"),elementId:"tooltip-new-tab",openDirection:"left"}))};this.renderActionMenu=()=>{if(!this.actions||this.isFullscreen){return}return i("limel-menu",{class:"action-menu",items:this.actions,onSelect:this.emitOnAction,"open-direction":"left"},i("button",{class:"button--action",id:"tooltip-more",role:"button",slot:"trigger"},i("limel-icon",{name:"menu_2"}),i("limel-tooltip",{label:this.getTranslation("more-actions"),elementId:"tooltip-more",openDirection:"left"})))};this.createURL=async t=>{if(["pdf"].includes(t)){const t=await fetch(this.url);const e=await t.blob();this.fileUrl=URL.createObjectURL(e)}else{this.fileUrl=this.url}this.loading=false};this.handleToggleFullscreen=()=>{if(this.fullscreen.isSupported()){this.fullscreen.toggle();this.isFullscreen=!this.isFullscreen}};this.emitOnAction=t=>{t.stopPropagation();this.action.emit(t.detail)};this.url=undefined;this.filename=undefined;this.alt=undefined;this.allowFullscreen=false;this.allowOpenInNewTab=false;this.allowDownload=false;this.language="en";this.officeViewer="microsoft-office";this.actions=undefined;this.isFullscreen=false;this.fileType=undefined;this.loading=true;this.fileUrl="";this.fullscreen=new n(this.HostElement)}async componentWillLoad(){this.fileType=s(this.filename,this.url);await this.createURL(this.fileType)}render(){if(!this.isOfficeFileAccessibleViaURL){return this.renderNoFileSupportMessage()}if(this.loading){return i("limel-spinner",{size:"x-small",limeBranded:false})}return this.renderFileViewer()}async watchUrl(t,e){if(t===e){return}this.loading=true;this.fileType=s(this.filename,this.fileUrl);await this.createURL(this.fileType)}renderFileViewer(){const t={pdf:this.renderPdf,image:this.renderImage,video:this.renderVideo,audio:this.renderAudio,text:this.renderText,office:this.renderOffice};const e=t[this.fileType]||this.renderNoFileSupportMessage;return e()}getTranslation(t){return r.get(`file-viewer.${t}`,this.language)}get HostElement(){return o(this)}static get watchers(){return{url:["watchUrl"]}}};l.style=a;export{l as limel_file_viewer};
-//# sourceMappingURL=p-488decb0.entry.js.map
+import{r as t,c as e,h as o,g as i}from"./p-443111b3.js";import{t as r}from"./p-8915fa60.js";function s(t,e){const o=t||e;if(!o){return"unknown"}const i=o.split(".").pop().toLowerCase();const r={pdf:"pdf",jpg:"image",jpeg:"image",heic:"image",bmp:"image",png:"image",gif:"image",svg:"image",svgz:"image",ep:"image",eps:"image",avi:"video",flv:"video",h264:"video",mov:"video",mp4:"video",mwv:"video",mkv:"video",mp3:"audio",wav:"audio",wma:"audio",ogg:"audio",txt:"text",json:"text",html:"text",xml:"text",doc:"office",docx:"office",odt:"office",dot:"office",dotx:"office",docm:"office",dotm:"office",pot:"office",ppt:"office",pptx:"office",odp:"office",potx:"office",potm:"office",pps:"office",ppsx:"office",ppsm:"office",pptm:"office",ppam:"office",pages:"office",xls:"office",xlsx:"office",xlsm:"office",xlsb:"office",ods:"office",csv:"office",numbers:"office"};return r[i]||"unknown"}class n{constructor(t){this.requestFullscreen=()=>{if(this.enter){this.enter()}};this.exitFullscreen=()=>{if(this.exit){this.exit.bind(window.document)()}};this.toggle=()=>{const t=window.document;const e=t.fullscreenElement||t.mozFullScreenElement||t.webkitFullscreenElement||t.msFullscreenElement;if(e){this.exitFullscreen()}else{this.requestFullscreen()}};this.enter=t.requestFullscreen||t.msRequestFullscreen||t.mozRequestFullScreen||t.webkitRequestFullscreen;this.enter=this.enter.bind(t);const e=window.document;this.exit=e.exitFullscreen||e.msExitFullscreen||e.mozCancelFullScreen||e.webkitExitFullscreen}isSupported(){return!!this.requestFullscreen}}const a='@charset "UTF-8";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type="application/pdf"]{min-height:20rem}object[type="text/plain"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type="text/plain"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support .icon--warning{color:rgb(var(--color-orange-default))}[class^=button--]{all:unset;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover,[class^=button--]:focus,[class^=button--]:focus-visible{will-change:color, background-color, box-shadow, transform}[class^=button--]:hover{transform:translate3d(0, -0.04rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}[class^=button--]:hover,[class^=button--]:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}';const l=class{constructor(i){t(this,i);this.action=e(this,"action",7);this.renderPdf=()=>[o("div",{class:"action-menu-for-pdf-files"},this.renderActionMenu()),o("iframe",{src:this.fileUrl,loading:"lazy"})];this.renderImage=()=>[this.renderButtons(),o("img",{src:this.fileUrl,alt:this.alt,loading:"lazy"})];this.renderVideo=()=>o("video",{controls:true},o("source",{src:this.fileUrl}));this.renderAudio=()=>o("audio",{controls:true},o("source",{src:this.fileUrl}));this.renderText=()=>[this.renderButtons(),o("object",{data:this.fileUrl,type:"text/plain"})];this.renderOffice=()=>[o("div",{class:"action-menu-for-office-files"},this.renderActionMenu()),o("iframe",{src:this.getOfficeViewerUrl()+this.fileUrl+"&embedded=true",loading:"lazy"})];this.isOfficeFileAccessibleViaURL=()=>this.fileType==="office"&&!(this.fileUrl.startsWith("http://")||this.fileUrl.startsWith("https://"));this.getOfficeViewerUrl=()=>{const t={"microsoft-office":"https://view.officeapps.live.com/op/embed.aspx?src=","google-drive":"https://docs.google.com/gview?url="};return t[this.officeViewer]};this.renderNoFileSupportMessage=()=>o("div",{class:"no-support",role:"alert"},o("limel-icon",{class:"icon--warning",name:"brake_warning",size:"large",role:"presentation"}),o("p",null,this.getTranslation("message.unsupported-filetype")),this.renderDownloadButton());this.renderButtons=()=>o("div",{class:"buttons"},this.renderActionMenu(),this.renderToggleFullscreenButton(),this.renderDownloadButton(),this.renderOpenInNewTabButton());this.renderToggleFullscreenButton=()=>{if(!this.allowFullscreen||!this.fullscreen.isSupported()){return}const t=this.isFullscreen?"multiply":"fit_to_width";const e=this.isFullscreen?this.getTranslation("exit-fullscreen"):this.getTranslation("open-in-fullscreen");return[o("button",{class:"button--toggle-fullscreen",id:"tooltip-toggle-fullscreen",role:"button",onClick:this.handleToggleFullscreen},o("limel-icon",{name:t}),o("limel-tooltip",{label:e,elementId:"tooltip-toggle-fullscreen",openDirection:"left"}))]};this.renderDownloadButton=()=>{if(!this.allowDownload||this.isFullscreen){return}return o("a",{class:"button--download",id:"tooltip-download",role:"button",download:this.filename?this.filename:"",href:this.fileUrl,target:"_blank"},o("limel-icon",{name:"download_2"}),o("limel-tooltip",{label:this.getTranslation("download"),elementId:"tooltip-download",openDirection:"left"}))};this.renderOpenInNewTabButton=()=>{if(!this.allowOpenInNewTab||this.isFullscreen){return}return o("a",{class:"button--new-tab",id:"tooltip-new-tab",role:"button",href:this.fileUrl,target:"_blank",rel:"noopener noreferrer"},o("limel-icon",{name:"external_link"}),o("limel-tooltip",{label:this.getTranslation("open-in-new-tab"),elementId:"tooltip-new-tab",openDirection:"left"}))};this.renderActionMenu=()=>{if(!this.actions||this.isFullscreen){return}return o("limel-menu",{class:"action-menu",items:this.actions,onSelect:this.emitOnAction,"open-direction":"left"},o("button",{class:"button--action",id:"tooltip-more",role:"button",slot:"trigger"},o("limel-icon",{name:"menu_2"}),o("limel-tooltip",{label:this.getTranslation("more-actions"),elementId:"tooltip-more",openDirection:"left"})))};this.createURL=async t=>{if(["pdf"].includes(t)){const t=await fetch(this.url);const e=await t.blob();this.fileUrl=URL.createObjectURL(e)}else{this.fileUrl=this.url}this.loading=false};this.handleToggleFullscreen=()=>{if(this.fullscreen.isSupported()){this.fullscreen.toggle();this.isFullscreen=!this.isFullscreen}};this.emitOnAction=t=>{t.stopPropagation();this.action.emit(t.detail)};this.url=undefined;this.filename=undefined;this.alt=undefined;this.allowFullscreen=false;this.allowOpenInNewTab=false;this.allowDownload=false;this.language="en";this.officeViewer="microsoft-office";this.actions=undefined;this.isFullscreen=false;this.fileType=undefined;this.loading=true;this.fileUrl="";this.fullscreen=new n(this.HostElement)}async componentWillLoad(){this.fileType=s(this.filename,this.url);await this.createURL(this.fileType)}render(){if(!this.isOfficeFileAccessibleViaURL){return this.renderNoFileSupportMessage()}if(this.loading){return o("limel-spinner",{size:"x-small",limeBranded:false})}return this.renderFileViewer()}async watchUrl(t,e){if(t===e){return}this.loading=true;this.fileType=s(this.filename,this.fileUrl);await this.createURL(this.fileType)}renderFileViewer(){const t={pdf:this.renderPdf,image:this.renderImage,video:this.renderVideo,audio:this.renderAudio,text:this.renderText,office:this.renderOffice};const e=t[this.fileType]||this.renderNoFileSupportMessage;return e()}getTranslation(t){return r.get(`file-viewer.${t}`,this.language)}get HostElement(){return i(this)}static get watchers(){return{url:["watchUrl"]}}};l.style=a;export{l as limel_file_viewer};
+//# sourceMappingURL=p-17da2b0a.entry.js.map

package/dist/lime-elements/p-17da2b0a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["detectExtension","fileName","url","pathLike","extension","split","pop","toLowerCase","extensionsToTypes","pdf","jpg","jpeg","heic","bmp","png","gif","svg","svgz","ep","eps","avi","flv","h264","mov","mp4","mwv","mkv","mp3","wav","wma","ogg","txt","json","html","xml","doc","docx","odt","dot","dotx","docm","dotm","pot","ppt","pptx","odp","potx","potm","pps","ppsx","ppsm","pptm","ppam","pages","xls","xlsx","xlsm","xlsb","ods","csv","numbers","Fullscreen","constructor","element","this","requestFullscreen","enter","exitFullscreen","exit","bind","window","document","toggle","isFullscreen","fullscreenElement","mozFullScreenElement","webkitFullscreenElement","msFullscreenElement","msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msExitFullscreen","mozCancelFullScreen","webkitExitFullscreen","isSupported","fileViewerCss","FileViewer","hostRef","renderPdf","h","class","renderActionMenu","src","fileUrl","loading","renderImage","renderButtons","alt","renderVideo","controls","renderAudio","renderText","data","type","renderOffice","getOfficeViewerUrl","isOfficeFileAccessibleViaURL","fileType","startsWith","officeViewers","officeViewer","renderNoFileSupportMessage","role","name","size","getTranslation","renderDownloadButton","renderToggleFullscreenButton","renderOpenInNewTabButton","allowFullscreen","fullscreen","icon","label","id","onClick","handleToggleFullscreen","elementId","openDirection","allowDownload","download","filename","href","target","allowOpenInNewTab","rel","actions","items","onSelect","emitOnAction","slot","createURL","async","includes","response","fetch","blob","URL","createObjectURL","event","stopPropagation","action","emit","detail","HostElement","render","limeBranded","renderFileViewer","newUrl","oldUrl","fileViewerFunctions","image","video","audio","text","office","fileViewerFunction","key","translate","get","language"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n    const pathLike = fileName || url;\n    if (!pathLike) {\n        return 'unknown';\n    }\n\n    const extension = pathLike.split('.').pop().toLowerCase();\n    const extensionsToTypes = {\n        pdf: 'pdf',\n        jpg: 'image',\n        jpeg: 'image',\n        heic: 'image',\n        bmp: 'image',\n        png: 'image',\n        gif: 'image',\n        svg: 'image',\n        svgz: 'image',\n        ep: 'image',\n        eps: 'image',\n        avi: 'video',\n        flv: 'video',\n        h264: 'video',\n        mov: 'video',\n        mp4: 'video',\n        mwv: 'video',\n        mkv: 'video',\n        mp3: 'audio',\n        wav: 'audio',\n        wma: 'audio',\n        ogg: 'audio',\n        txt: 'text',\n        json: 'text',\n        html: 'text',\n        xml: 'text',\n        // Word\n        doc: 'office',\n        docx: 'office',\n        odt: 'office',\n        dot: 'office',\n        dotx: 'office',\n        docm: 'office', // not supported\n        dotm: 'office', // not yet tested\n        // Presentation\n        pot: 'office', // not tested\n        ppt: 'office',\n        pptx: 'office',\n        odp: 'office',\n        potx: 'office', // not supported\n        potm: 'office', // not supported\n        pps: 'office',\n        ppsx: 'office',\n        ppsm: 'office', // not supported\n        pptm: 'office', // not supported\n        ppam: 'office', // not tested\n        pages: 'office', // not supported (Apple)\n        // Spreadsheet\n        xls: 'office',\n        xlsx: 'office',\n        xlsm: 'office',\n        xlsb: 'office',\n        ods: 'office',\n        csv: 'office', // not supported\n        numbers: 'office', // not supported (Apple)\n    };\n\n    return extensionsToTypes[extension] || 'unknown';\n}\n","export class Fullscreen {\n    private enter: () => void;\n    private exit: () => void;\n\n    constructor(element: any) {\n        this.enter =\n            element.requestFullscreen ||\n            element.msRequestFullscreen ||\n            element.mozRequestFullScreen ||\n            element.webkitRequestFullscreen;\n        this.enter = this.enter.bind(element);\n        const doc: any = window.document;\n        this.exit =\n            doc.exitFullscreen ||\n            doc.msExitFullscreen ||\n            doc.mozCancelFullScreen ||\n            doc.webkitExitFullscreen;\n    }\n\n    public requestFullscreen = () => {\n        if (this.enter) {\n            this.enter();\n        }\n    };\n\n    public exitFullscreen = () => {\n        if (this.exit) {\n            this.exit.bind(window.document)();\n        }\n    };\n\n    public toggle = () => {\n        const doc: any = window.document;\n        const isFullscreen =\n            doc.fullscreenElement ||\n            doc.mozFullScreenElement ||\n            doc.webkitFullscreenElement ||\n            doc.msFullscreenElement;\n\n        if (isFullscreen) {\n            this.exitFullscreen();\n        } else {\n            this.requestFullscreen();\n        }\n    };\n\n    public isSupported(): boolean {\n        return !!this.requestFullscreen;\n    }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n    isolation: isolate;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n    max-height: 100%;\n    max-width: 100%;\n    box-sizing: border-box;\n}\n\niframe {\n    border: none;\n    width: 100%;\n    height: 100%;\n    min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n    min-width: 7rem;\n    object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n    width: 100%;\n    height: auto;\n}\n\naudio {\n    width: 100%;\n}\n\nobject {\n    width: 100%;\n    height: 100%;\n}\n\nobject[type='application/pdf'] {\n    min-height: 20rem;\n    // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n    border-radius: 0.25rem;\n    padding-right: $size-of-buttons;\n\n    overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n    background-color: rgb(var(--color-gray-darker));\n\n    object[type='text/plain'] {\n        max-width: 50rem;\n        max-height: calc(100% - 2rem);\n    }\n}\n\n:host(:fullscreen) {\n    @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n    // this is repetition of the previous block,\n    // but needed for Safari to work.\n    // Cannot write SCSS rules for `:host` using commas for some reason.\n    // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n    // So you have to repeat it sadly.\n    @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n    Component,\n    Element,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n *\n * @exampleComponent limel-example-file-viewer-basic\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n *\n * @beta\n */\n\n@Component({\n    tag: 'limel-file-viewer',\n    shadow: true,\n    styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n    /**\n     * Link to the file\n     */\n    @Prop({ reflect: true })\n    public url: string;\n\n    /**\n     * The name of the file that must also contains its extension.\n     * This overrides the filename that the `url` ends with.\n     * Useful when the `url` does not contain the filename.\n     * When specified, the `filename` will be used as filename of\n     * the downloaded file.\n     */\n    @Prop({ reflect: true })\n    public filename?: string;\n\n    /**\n     * An optional alternative text, mainly for assistive technologies and screen readers.\n     * It is used for only image files, as an `alt` attribute.\n     * Should optimally hold a description of the image,\n     * which is also displayed on the page if the image can't be loaded for some reason.\n     */\n    @Prop({ reflect: true })\n    public alt?: string;\n\n    /**\n     * Displays a button that allows the user to view the file\n     * in fullscreen mode.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowFullscreen?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to open the file\n     * in a new browser tab.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowOpenInNewTab?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to download the file.\n     * Note that due to the browser's security policies,\n     * the file should be hosted on the same domain\n     * for the download button to work properly.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowDownload?: boolean = false;\n\n    /**\n     * Defines the localization for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Defines the third-party viewer that should be used to render\n     * the content of office files, such as word processing documents,\n     * presentations, or spreadsheets.\n     */\n    @Prop({ reflect: true })\n    public officeViewer: OfficeViewer = 'microsoft-office';\n\n    /**\n     * An array of custom actions that can be displayed\n     * as an action menu on the file which is being displayed.\n     */\n    @Prop()\n    public actions: ListItem[];\n\n    /**\n     * Emitted when a custom action is selected from the action menu.\n     */\n    @Event()\n    public action: EventEmitter<ListItem>;\n\n    @Element()\n    public HostElement: HTMLLimelFileViewerElement;\n\n    private fullscreen: Fullscreen;\n\n    @State()\n    private isFullscreen: boolean = false;\n\n    @State()\n    private fileType: FileType;\n\n    /**\n     * True while the file is being loaded.\n     */\n    @State()\n    private loading: boolean = true;\n\n    @State()\n    private fileUrl: string = '';\n\n    constructor() {\n        this.fullscreen = new Fullscreen(this.HostElement);\n    }\n\n    public async componentWillLoad() {\n        this.fileType = detectExtension(this.filename, this.url);\n        await this.createURL(this.fileType);\n    }\n\n    public render() {\n        if (!this.isOfficeFileAccessibleViaURL) {\n            return this.renderNoFileSupportMessage();\n        }\n\n        if (this.loading) {\n            return <limel-spinner size=\"x-small\" limeBranded={false} />;\n        }\n\n        return this.renderFileViewer();\n    }\n\n    @Watch('url')\n    protected async watchUrl(newUrl: string, oldUrl: string) {\n        if (newUrl === oldUrl) {\n            return;\n        }\n\n        this.loading = true;\n        this.fileType = detectExtension(this.filename, this.fileUrl);\n        await this.createURL(this.fileType);\n    }\n\n    private renderFileViewer() {\n        const fileViewerFunctions = {\n            pdf: this.renderPdf,\n            image: this.renderImage,\n            video: this.renderVideo,\n            audio: this.renderAudio,\n            text: this.renderText,\n            office: this.renderOffice,\n        };\n        const fileViewerFunction =\n            fileViewerFunctions[this.fileType] ||\n            this.renderNoFileSupportMessage;\n\n        return fileViewerFunction();\n    }\n\n    private renderPdf = () => {\n        return [\n            <div class=\"action-menu-for-pdf-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe src={this.fileUrl} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderImage = () => {\n        return [\n            this.renderButtons(),\n            <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderVideo = () => {\n        return (\n            <video controls>\n                <source src={this.fileUrl} />\n            </video>\n        );\n    };\n\n    private renderAudio = () => {\n        return (\n            <audio controls>\n                <source src={this.fileUrl} />\n            </audio>\n        );\n    };\n\n    private renderText = () => {\n        return [\n            this.renderButtons(),\n            <object data={this.fileUrl} type=\"text/plain\" />,\n        ];\n    };\n\n    private renderOffice = () => {\n        return [\n            <div class=\"action-menu-for-office-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe\n                src={\n                    this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n                }\n                loading=\"lazy\"\n            />,\n        ];\n    };\n\n    private isOfficeFileAccessibleViaURL = () => {\n        return (\n            this.fileType === 'office' &&\n            !(\n                this.fileUrl.startsWith('http://') ||\n                this.fileUrl.startsWith('https://')\n            )\n        );\n    };\n\n    private getOfficeViewerUrl = () => {\n        const officeViewers = {\n            'microsoft-office':\n                'https://view.officeapps.live.com/op/embed.aspx?src=',\n            'google-drive': 'https://docs.google.com/gview?url=',\n        };\n\n        return officeViewers[this.officeViewer];\n    };\n\n    private renderNoFileSupportMessage = () => {\n        return (\n            <div class=\"no-support\" role=\"alert\">\n                <limel-icon\n                    class=\"icon--warning\"\n                    name=\"brake_warning\"\n                    size=\"large\"\n                    role=\"presentation\"\n                />\n                <p>{this.getTranslation('message.unsupported-filetype')}</p>\n                {this.renderDownloadButton()}\n            </div>\n        );\n    };\n\n    private renderButtons = () => {\n        return (\n            <div class=\"buttons\">\n                {this.renderActionMenu()}\n                {this.renderToggleFullscreenButton()}\n                {this.renderDownloadButton()}\n                {this.renderOpenInNewTabButton()}\n            </div>\n        );\n    };\n\n    private renderToggleFullscreenButton = () => {\n        if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n            return;\n        }\n\n        const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n        // eslint-disable-next-line multiline-ternary\n        const label = this.isFullscreen\n            ? // eslint-disable-next-line multiline-ternary\n              this.getTranslation('exit-fullscreen')\n            : this.getTranslation('open-in-fullscreen');\n\n        return [\n            <button\n                class=\"button--toggle-fullscreen\"\n                id=\"tooltip-toggle-fullscreen\"\n                role=\"button\"\n                onClick={this.handleToggleFullscreen}\n            >\n                <limel-icon name={icon} />\n                <limel-tooltip\n                    label={label}\n                    elementId=\"tooltip-toggle-fullscreen\"\n                    openDirection=\"left\"\n                />\n            </button>,\n        ];\n    };\n\n    private renderDownloadButton = () => {\n        if (!this.allowDownload || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--download\"\n                id=\"tooltip-download\"\n                role=\"button\"\n                download={this.filename ? this.filename : ''}\n                href={this.fileUrl}\n                target=\"_blank\"\n            >\n                <limel-icon name=\"download_2\" />\n                <limel-tooltip\n                    label={this.getTranslation('download')}\n                    elementId=\"tooltip-download\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderOpenInNewTabButton = () => {\n        if (!this.allowOpenInNewTab || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--new-tab\"\n                id=\"tooltip-new-tab\"\n                role=\"button\"\n                href={this.fileUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <limel-icon name=\"external_link\" />\n                <limel-tooltip\n                    label={this.getTranslation('open-in-new-tab')}\n                    elementId=\"tooltip-new-tab\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderActionMenu = () => {\n        if (!this.actions || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"action-menu\"\n                items={this.actions}\n                onSelect={this.emitOnAction}\n                open-direction=\"left\"\n            >\n                <button\n                    class=\"button--action\"\n                    id=\"tooltip-more\"\n                    role=\"button\"\n                    slot=\"trigger\"\n                >\n                    <limel-icon name=\"menu_2\" />\n                    <limel-tooltip\n                        label={this.getTranslation('more-actions')}\n                        elementId=\"tooltip-more\"\n                        openDirection=\"left\"\n                    />\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private createURL = async (fileType: string) => {\n        if (['pdf'].includes(fileType)) {\n            const response = await fetch(this.url);\n            const blob = await response.blob();\n\n            this.fileUrl = URL.createObjectURL(blob);\n        } else {\n            this.fileUrl = this.url;\n        }\n\n        this.loading = false;\n    };\n\n    private handleToggleFullscreen = () => {\n        if (this.fullscreen.isSupported()) {\n            this.fullscreen.toggle();\n            this.isFullscreen = !this.isFullscreen;\n        }\n    };\n\n    private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n        event.stopPropagation();\n        this.action.emit(event.detail);\n    };\n\n    private getTranslation(key: string) {\n        return translate.get(`file-viewer.${key}`, this.language);\n    }\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-b66faa7b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,g as e}from"./p-443111b3.js";import{i as n}from"./p-5e7b7b03.js";import{T as h,E as r,a as o,b as l,c as a,d as c,A as d,e as u,f,g as p}from"./p-e03dfe70.js";import{c as m}from"./p-96460db3.js";import{g as y,c as b}from"./p-2f777fdb.js";import{d as g}from"./p-18c97232.js";import"./p-c93050d6.js";import"./p-365098fe.js";import"./p-d529bb7d.js";import"./p-858c6b82.js";const v=":host{position:relative;display:block}:host([hidden]){display:none}";const w=300;const j="limel-chip-set";const C=20;const D=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.getValueId=t=>{const i=t.value;if(!!i&&typeof i==="object"){return i.id}return i};this.createChips=t=>{if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]};this.createChip=t=>{const i=y(t.icon);const s=b(t.icon,t.iconColor);const e=this.getValueId(t);return{id:`${e}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t,menuItems:t.actions}};this.search=async t=>{const i=setTimeout((()=>{this.loading=true}));const s=this.searcher||this.defaultSearcher;const e=await s(this.textValue);clearTimeout(i);this.handleSearchResult(t,e)};this.defaultSearcher=async t=>{if(t===""){return this.allItems.slice(0,C)}const i=this.allItems.filter((i=>{let s=i.text.toLowerCase();if(i.secondaryText){s=s+" "+i.secondaryText.toLowerCase()}return s.includes(t.toLowerCase())}));return i.slice(0,C)};this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.allItems=[];this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=m();this.debouncedSearch=g(this.search,w)}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.chipSet=this.host.shadowRoot.querySelector(j)}disconnectedCallback(){this.debouncedSearch.cancel()}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){var t;if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!((t=this.items)===null||t===void 0?void 0:t.length)){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[h,r,o].includes(t.key);const s=[l,a,c].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.debouncedSearch(i);if(i===""){this.debouncedSearch.flush()}}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){this.textValue="";(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}handleInputFieldFocus(){const t=this.textValue;this.debouncedSearch(t)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>{const s=this.getValueId(i);return`${s}`===t.id}))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===h||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===d||t.keyCode===u;const e=t.key===f||t.keyCode===p;if(!i&&!s&&!e){return}const n=document.querySelector(` #${this.portalId} limel-list`);if(!n){return}t.preventDefault();if(i||e){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===r||t.keyCode===a;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[]);this.debouncedSearch.cancel()}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"]}}};D.style=v;export{D as limel_picker};
+//# sourceMappingURL=p-b66faa7b.entry.js.map

package/dist/lime-elements/p-b66faa7b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pickerCss","SEARCH_DEBOUNCE","CHIP_SET_TAG_NAME","DEFAULT_SEARCHER_MAX_RESULTS","Picker","constructor","hostRef","this","chipSetEditMode","getValueId","item","value","id","createChips","multiple","listItems","map","createChip","listItem","name","getIconName","icon","color","getIconFillColor","iconColor","valueId","text","removable","undefined","menuItems","actions","search","async","query","timeoutId","setTimeout","loading","searcher","defaultSearcher","result","textValue","clearTimeout","handleSearchResult","allItems","slice","filteredItems","filter","searchText","toLowerCase","secondaryText","includes","handleTextInput","bind","handleInputKeyDown","handleDropdownKeyDown","handleInputFieldFocus","handleChange","handleInteract","handleListChange","handleActionListChange","handleStopEditAndBlur","handleCloseMenu","onListKeyDown","portalId","createRandomString","debouncedSearch","debounce","componentWillLoad","chips","componentDidLoad","chipSet","host","shadowRoot","querySelector","disconnectedCallback","cancel","getEditMode","render","props","maxItems","h","Object","assign","type","inputType","label","helperText","leadingIcon","disabled","invalid","delimiter","renderDelimiter","readonly","required","searchLabel","onInput","onKeyDown","onChange","onInteract","onStartEdit","onStopEdit","emptyInputOnBlur","clearAllButton","renderDropdown","onChangeValue","dropDownContent","getDropdownContent","content","shouldShowDropDownContent","actionContent","getActionContent","actionPosition","push","renderPortal","actionCount","_b","_a","length","class","actionScrollBehavior","badgeIcons","items","removeUnusedPropertiesOnAction","action","isFull","renderSpinner","renderEmptyMessage","renderListResult","style","width","display","padding","limeBranded","emptyResultMessage","margin","event","keyFound","TAB","ESCAPE","ENTER","key","keyCodeFound","TAB_KEY_CODE","ESCAPE_KEY_CODE","ENTER_KEY_CODE","keyCode","setFocus","dropdownZIndex","getComputedStyle","getPropertyValue","visible","containerId","inheritParentWidth","containerStyle","open","allowClicksElement","onDismiss","element","activeElement","document","portalElement","isDescendant","clearInputField","stopPropagation","detail","flush","newValue","change","emit","chip","find","interact","isForwardTab","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","preventDefault","listElement","focus","isEscape","values","emptyInput"],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n  * @prop --dropdown-z-index: z-index of the dropdown menu.\n  */\n\n:host {\n    position: relative;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n","import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ARROW_DOWN,\n    ARROW_DOWN_KEY_CODE,\n    ARROW_UP,\n    ARROW_UP_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    LimelChipSetCustomEvent,\n    LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\nconst DEFAULT_SEARCHER_MAX_RESULTS = 20;\n\n/**\n * @exampleComponent limel-example-picker-basic\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n    tag: 'limel-picker',\n    shadow: true,\n    styleUrl: 'picker.scss',\n})\nexport class Picker {\n    /**\n     * True if the picker should be disabled\n     */\n    @Prop()\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing items,\n     * but allow interaction with existing items.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Text to display for the input field of the picker\n     */\n    @Prop()\n    public label: string;\n\n    /**\n     * Search label to display in the input field when searching\n     */\n    @Prop()\n    public searchLabel: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop()\n    public leadingIcon: string;\n\n    /**\n     * A message to display when the search returned an empty result\n     */\n    @Prop()\n    public emptyResultMessage: string;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop()\n    public required: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Currently selected value or values. Where the value can be an object.\n     */\n    @Prop()\n    public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n    /**\n     * A search function that takes a search-string as an argument,\n     * and returns a promise that will eventually be resolved with\n     * an array of `ListItem`:s.\n     *\n     * See the docs for the type `Searcher` for type information on\n     * the searcher function itself.\n     */\n    @Prop()\n    public searcher?: Searcher;\n\n    /**\n     * Only used if no `searcher` is provided. The picker will then use a\n     * default search function that filters the `allItems` based on the\n     * `text` and `secondaryText` properties of the items.\n     * This way, custom search functions are typically only needed when the\n     * search is done on the server.\n     * For performance reasons, the default searcher will never return more\n     * than 20 items, but if there are more than 20 items, the rest can be\n     * found by typing more characters in the search field.\n     */\n    @Prop()\n    public allItems?: Array<ListItem<PickerValue>> = [];\n\n    /**\n     * True if multiple values are allowed\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Sets delimiters between chips. Works only when `multiple` is `true`.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Static actions that can be clicked by the user.\n     */\n    @Prop()\n    public actions: Array<ListItem<Action>> = [];\n\n    /**\n     * Position of the custom static actions in the picker's results dropdown.\n     * Can be set to `'top'` or `'bottom'`.\n     */\n    @Prop()\n    public actionPosition: ActionPosition = 'bottom';\n\n    /**\n     * Scroll behavior of the custom static actions, when user scrolls\n     * in the picker's results dropdown. Can be set to `'scroll'` which means\n     * the action items will scroll together with the list, or `'sticky'` which\n     * retains their position at the top or bottom of the drop down while\n     * scrolling.\n     */\n    @Prop()\n    public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n    /**\n     * Whether badge icons should be used in the result list or not\n     */\n    @Prop({ reflect: true })\n    public badgeIcons: boolean = false;\n\n    /**\n     * Fired when a new value has been selected from the picker\n     */\n    @Event()\n    private change: EventEmitter<\n        ListItem<PickerValue> | Array<ListItem<PickerValue>>\n    >;\n\n    /**\n     * Fired when clicking on a selected value\n     */\n    @Event()\n    private interact: EventEmitter<ListItem<PickerValue>>;\n\n    /**\n     * Emitted when the user selects an action.\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @State()\n    private items: Array<ListItem<number | string>>;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private loading: boolean = false;\n\n    @State()\n    private chips: Chip[] = [];\n\n    @Element()\n    private host: HTMLLimelPickerElement;\n\n    // Should NOT be decorated with State(), since this\n    // should not trigger a re-render by itself.\n    private chipSetEditMode = false;\n\n    private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n    private chipSet: HTMLLimelChipSetElement;\n    private portalId: string;\n\n    constructor() {\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n        this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n        this.handleInteract = this.handleInteract.bind(this);\n        this.handleListChange = this.handleListChange.bind(this);\n        this.handleActionListChange = this.handleActionListChange.bind(this);\n        this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n        this.handleCloseMenu = this.handleCloseMenu.bind(this);\n        this.onListKeyDown = this.onListKeyDown.bind(this);\n\n        this.portalId = createRandomString();\n        this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n    }\n\n    public componentWillLoad() {\n        this.chips = this.createChips(this.value);\n    }\n\n    public componentDidLoad() {\n        this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n    }\n\n    public disconnectedCallback() {\n        this.debouncedSearch.cancel();\n    }\n\n    public async componentWillUpdate() {\n        this.chipSetEditMode = false;\n        if (this.chipSet) {\n            this.chipSetEditMode = await this.chipSet.getEditMode();\n        }\n    }\n\n    public render() {\n        const props: {\n            maxItems?: number;\n        } = {};\n\n        if (!this.multiple) {\n            props.maxItems = 1;\n        }\n\n        return [\n            <limel-chip-set\n                type=\"input\"\n                inputType=\"search\"\n                label={this.label}\n                helperText={this.helperText}\n                leadingIcon={this.leadingIcon}\n                value={this.chips}\n                disabled={this.disabled}\n                invalid={this.invalid}\n                delimiter={this.renderDelimiter()}\n                readonly={this.readonly}\n                required={this.required}\n                searchLabel={this.searchLabel}\n                onInput={this.handleTextInput}\n                onKeyDown={this.handleInputKeyDown}\n                onChange={this.handleChange}\n                onInteract={this.handleInteract}\n                onStartEdit={this.handleInputFieldFocus}\n                onStopEdit={this.handleStopEditAndBlur}\n                emptyInputOnBlur={false}\n                clearAllButton={this.multiple && !this.chipSetEditMode}\n                {...props}\n            />,\n            this.renderDropdown(),\n        ];\n    }\n\n    @Watch('value')\n    protected onChangeValue() {\n        this.chips = this.createChips(this.value);\n    }\n\n    private renderDelimiter() {\n        if (this.multiple) {\n            return this.delimiter;\n        }\n\n        return null;\n    }\n\n    private getValueId = (item: ListItem) => {\n        const value = item.value;\n        if (!!value && typeof value === 'object') {\n            return value.id;\n        }\n\n        return value;\n    };\n\n    private createChips = (value: ListItem | ListItem[]): Chip[] => {\n        if (!value) {\n            return [];\n        }\n\n        if (this.multiple) {\n            const listItems: ListItem[] = value as ListItem[];\n\n            return listItems.map(this.createChip);\n        }\n\n        const listItem: ListItem = value as ListItem;\n\n        return [this.createChip(listItem)];\n    };\n\n    private createChip = (listItem: ListItem): Chip => {\n        const name = getIconName(listItem.icon);\n        const color = getIconFillColor(listItem.icon, listItem.iconColor);\n        const valueId = this.getValueId(listItem);\n\n        return {\n            id: `${valueId}`,\n            text: listItem.text,\n            removable: true,\n            icon: name ? { name: name, color: color } : undefined,\n            value: listItem,\n            menuItems: listItem.actions,\n        };\n    };\n\n    /**\n     * Renders the dropdown with the items to pick from, or a spinner if the picker\n     * is waiting for items to be received\n     *\n     * @returns picker dropdown\n     */\n    private renderDropdown() {\n        const dropDownContent = this.getDropdownContent();\n\n        const content = [];\n\n        if (this.shouldShowDropDownContent()) {\n            const actionContent = this.getActionContent();\n            if (this.actionPosition === 'top') {\n                content.push(actionContent);\n            }\n\n            if (dropDownContent) {\n                content.push(dropDownContent);\n            }\n\n            if (this.actionPosition === 'bottom') {\n                content.push(actionContent);\n            }\n        }\n\n        return this.renderPortal(content);\n    }\n\n    private getActionContent() {\n        const actionCount = this.actions?.length ?? 0;\n        if (actionCount === 0) {\n            return null;\n        }\n\n        return [\n            <limel-list\n                class={{\n                    'static-actions-list': true,\n                    'is-on-top': this.actionPosition === 'top',\n                    'is-at-bottom': this.actionPosition === 'bottom',\n                    'has-position-sticky':\n                        this.actionScrollBehavior === 'sticky',\n                }}\n                badgeIcons={true}\n                type={'selectable'}\n                onChange={this.handleActionListChange}\n                items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n            />,\n        ];\n    }\n\n    private removeUnusedPropertiesOnAction(\n        action: ListItem<Action>,\n    ): ListItem<Action> {\n        return {\n            ...action,\n            actions: [],\n        };\n    }\n\n    private shouldShowDropDownContent() {\n        if (this.isFull()) {\n            return false;\n        }\n\n        return !!this.chipSetEditMode;\n    }\n\n    private getDropdownContent() {\n        if (!this.shouldShowDropDownContent()) {\n            return;\n        }\n\n        if (this.loading) {\n            return this.renderSpinner();\n        }\n\n        if (!this.items?.length) {\n            return this.renderEmptyMessage();\n        }\n\n        return this.renderListResult();\n    }\n\n    /**\n     * Returns true if the picker is \"full\"\n     * The picker is considered to be full if it has a value and only one is allowed\n     *\n     * @returns true if the picker is full\n     */\n    private isFull(): boolean {\n        return !this.multiple && !!this.value;\n    }\n\n    private renderSpinner() {\n        return (\n            <div\n                style={{\n                    width: '100%',\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '1rem 0',\n                }}\n            >\n                <limel-spinner limeBranded={false} />\n            </div>\n        );\n    }\n\n    private renderEmptyMessage() {\n        if (!this.emptyResultMessage) {\n            return;\n        }\n\n        const style = {\n            color: 'rgb(var(--contrast-1100))',\n            'text-align': 'center',\n            margin: '0.5rem 1rem',\n        };\n\n        return <p style={style}>{this.emptyResultMessage}</p>;\n    }\n\n    private renderListResult() {\n        return (\n            <limel-list\n                badgeIcons={this.badgeIcons}\n                onChange={this.handleListChange}\n                onKeyDown={this.onListKeyDown}\n                type=\"selectable\"\n                items={this.items}\n            />\n        );\n    }\n\n    private onListKeyDown(event: KeyboardEvent) {\n        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n        const keyCodeFound = [\n            TAB_KEY_CODE,\n            ESCAPE_KEY_CODE,\n            ENTER_KEY_CODE,\n        ].includes(event.keyCode);\n        if (keyFound || keyCodeFound) {\n            this.chipSet.setFocus();\n        }\n    }\n\n    private renderPortal(content: any[] = []) {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <limel-portal\n                visible={content.length > 0}\n                containerId={this.portalId}\n                inheritParentWidth={true}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-menu-surface\n                    open={content.length > 0}\n                    allowClicksElement={this.host}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {content}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    }\n\n    /**\n     * Check if a descendant still has focus. If not, reset text value and search result.\n     */\n    private handleStopEditAndBlur() {\n        // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n        // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n        const element =\n            this.host.shadowRoot.activeElement || document.activeElement;\n        const portalElement = document.querySelector(`#${this.portalId}`);\n        if (\n            isDescendant(element as HTMLElement, this.host) ||\n            isDescendant(element as HTMLElement, portalElement as HTMLElement)\n        ) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    /**\n     * Input handler for the input field\n     *\n     * @param event - event\n     */\n    private async handleTextInput(event) {\n        event.stopPropagation();\n\n        const query = event.detail;\n        this.textValue = query;\n\n        this.debouncedSearch(query);\n        // If the search-query is an empty string, bypass debouncing.\n        if (query === '') {\n            this.debouncedSearch.flush();\n        }\n    }\n\n    private search = async (query: string) => {\n        const timeoutId = setTimeout(() => {\n            this.loading = true;\n        });\n        const searcher = this.searcher || this.defaultSearcher;\n        const result = (await searcher(this.textValue)) as Array<\n            ListItem<PickerValue>\n        >;\n\n        // If the search function resolves immediately,\n        // the loading spinner will not be shown.\n        clearTimeout(timeoutId);\n\n        this.handleSearchResult(query, result);\n    };\n\n    private defaultSearcher: Searcher = async (\n        query: string,\n    ): Promise<ListItem[]> => {\n        if (query === '') {\n            return this.allItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n        }\n\n        const filteredItems = this.allItems.filter((item) => {\n            let searchText = item.text.toLowerCase();\n            if (item.secondaryText) {\n                searchText =\n                    searchText + ' ' + item.secondaryText.toLowerCase();\n            }\n\n            return searchText.includes(query.toLowerCase());\n        });\n\n        return filteredItems.slice(0, DEFAULT_SEARCHER_MAX_RESULTS);\n    };\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleListChange(\n        event: LimelListCustomEvent<ListItem<PickerValue>>,\n    ) {\n        event.stopPropagation();\n        if (!this.value || this.value !== event.detail) {\n            let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n                event.detail;\n            if (this.multiple) {\n                newValue = [\n                    ...(this.value as Array<ListItem<PickerValue>>),\n                    event.detail,\n                ];\n            }\n\n            this.change.emit(newValue);\n            this.items = [];\n        }\n\n        if (this.multiple) {\n            this.textValue = '';\n            this.chipSet?.setFocus(true);\n        }\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleActionListChange(\n        event: LimelListCustomEvent<ListItem<Action>>,\n    ) {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.action.emit(event.detail.value);\n        this.items = [];\n    }\n\n    /**\n     * Focus handler for the chip set\n     * Prevent focus if the picker has a value and does not support multiple values\n     */\n    private handleInputFieldFocus() {\n        const query = this.textValue;\n        this.debouncedSearch(query);\n    }\n\n    private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n        event.stopPropagation();\n\n        let newValue = null;\n        if (this.multiple) {\n            const chips = event.detail as Chip[];\n            newValue = chips.map((chip) => {\n                return (this.value as ListItem[]).find((item) => {\n                    const valueId = this.getValueId(item);\n\n                    return `${valueId}` === chip.id;\n                });\n            });\n        }\n\n        this.change.emit(newValue);\n    }\n\n    private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n        event.stopPropagation();\n        this.interact.emit(event.detail ? event.detail.value : event.detail);\n    }\n\n    /**\n     * Key handler for the input field\n     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n     *\n     * @param event - event\n     */\n    private handleInputKeyDown(event: KeyboardEvent) {\n        const isForwardTab =\n            (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n            !event.altKey &&\n            !event.metaKey &&\n            !event.shiftKey;\n        const isUp =\n            event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n        const isDown =\n            event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (isForwardTab || isDown) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:first-child',\n            );\n            listElement.focus();\n\n            return;\n        }\n\n        if (isUp) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:last-child',\n            );\n            listElement.focus();\n        }\n    }\n\n    /**\n     * Key handler for the dropdown\n     *\n     * @param event - event\n     */\n    private handleDropdownKeyDown(event: KeyboardEvent) {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n        if (isEscape) {\n            event.preventDefault();\n            this.textValue = '';\n            this.chipSet.setFocus(true);\n        }\n    }\n\n    private handleSearchResult(query: string, result: ListItem[]) {\n        if (query === this.textValue) {\n            this.items = result;\n            if (this.multiple) {\n                const values = this.value as ListItem[];\n                this.items = result.filter((item) => {\n                    return !values.includes(item);\n                });\n            }\n\n            this.loading = false;\n        }\n    }\n\n    private handleCloseMenu() {\n        if (this.items.length > 0) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    private clearInputField() {\n        this.chipSet.emptyInput();\n        this.textValue = '';\n        this.handleSearchResult('', []);\n        this.debouncedSearch.cancel();\n    }\n}\n"],"mappings":"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"}

package/dist/types/components/picker/picker.d.ts

@@ -4,7 +4,7 @@ import { ListItem } from '../list/list-item.types';
 import { Searcher } from '../picker/searcher.types';
 import { PickerValue } from './value.types';
 /**
- * @exampleComponent limel-example-picker-single
+ * @exampleComponent limel-example-picker-basic
  * @exampleComponent limel-example-picker-multiple
  * @exampleComponent limel-example-picker-icons
  * @exampleComponent limel-example-picker-value-as-object
@@ -65,7 +65,18 @@ export declare class Picker {
    * See the docs for the type `Searcher` for type information on
    * the searcher function itself.
    */
-  searcher: Searcher;
+  searcher?: Searcher;
+  /**
+   * Only used if no `searcher` is provided. The picker will then use a
+   * default search function that filters the `allItems` based on the
+   * `text` and `secondaryText` properties of the items.
+   * This way, custom search functions are typically only needed when the
+   * search is done on the server.
+   * For performance reasons, the default searcher will never return more
+   * than 20 items, but if there are more than 20 items, the rest can be
+   * found by typing more characters in the search field.
+   */
+  allItems?: Array<ListItem<PickerValue>>;
   /**
    * True if multiple values are allowed
    */
@@ -161,6 +172,7 @@ export declare class Picker {
    */
   private handleTextInput;
   private search;
+  private defaultSearcher;
   /**
    * Change handler for the list
    *

package/dist/types/components.d.ts

@@ -1260,13 +1260,13 @@ export namespace Components {
      * This will allow users to preview the file in a fullscreen mode with the
      * browser and take advantage of for example native zooming and panning
      * functionalities.
-     * @exampleComponent limel-example-file-viewer
+     * @exampleComponent limel-example-file-viewer-basic
      * @exampleComponent limel-example-file-viewer-office
      * @exampleComponent limel-example-file-viewer-filename
      * @exampleComponent limel-example-file-viewer-inbuilt-actions
      * @exampleComponent limel-example-file-viewer-custom-actions
      * @exampleComponent limel-example-file-viewer-with-picker
-     * @private 
+     * @beta 
      */
     interface LimelFileViewer {
         /**
@@ -1989,7 +1989,7 @@ export namespace Components {
         "open": boolean;
     }
     /**
-     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
      * @exampleComponent limel-example-picker-value-as-object
@@ -2012,6 +2012,10 @@ export namespace Components {
           * Static actions that can be clicked by the user.
          */
         "actions": Array<ListItem<Action>>;
+        /**
+          * Only used if no `searcher` is provided. The picker will then use a default search function that filters the `allItems` based on the `text` and `secondaryText` properties of the items. This way, custom search functions are typically only needed when the search is done on the server. For performance reasons, the default searcher will never return more than 20 items, but if there are more than 20 items, the rest can be found by typing more characters in the search field.
+         */
+        "allItems"?: Array<ListItem<PickerValue>>;
         /**
           * Whether badge icons should be used in the result list or not
          */
@@ -2063,7 +2067,7 @@ export namespace Components {
         /**
           * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `ListItem`:s.  See the docs for the type `Searcher` for type information on the searcher function itself.
          */
-        "searcher": Searcher;
+        "searcher"?: Searcher;
         /**
           * Currently selected value or values. Where the value can be an object.
          */
@@ -3663,13 +3667,13 @@ declare global {
      * This will allow users to preview the file in a fullscreen mode with the
      * browser and take advantage of for example native zooming and panning
      * functionalities.
-     * @exampleComponent limel-example-file-viewer
+     * @exampleComponent limel-example-file-viewer-basic
      * @exampleComponent limel-example-file-viewer-office
      * @exampleComponent limel-example-file-viewer-filename
      * @exampleComponent limel-example-file-viewer-inbuilt-actions
      * @exampleComponent limel-example-file-viewer-custom-actions
      * @exampleComponent limel-example-file-viewer-with-picker
-     * @private 
+     * @beta 
      */
     interface HTMLLimelFileViewerElement extends Components.LimelFileViewer, HTMLStencilElement {
     }
@@ -4028,7 +4032,7 @@ declare global {
         new (): HTMLLimelMenuSurfaceElement;
     };
     /**
-     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
      * @exampleComponent limel-example-picker-value-as-object
@@ -5821,13 +5825,13 @@ declare namespace LocalJSX {
      * This will allow users to preview the file in a fullscreen mode with the
      * browser and take advantage of for example native zooming and panning
      * functionalities.
-     * @exampleComponent limel-example-file-viewer
+     * @exampleComponent limel-example-file-viewer-basic
      * @exampleComponent limel-example-file-viewer-office
      * @exampleComponent limel-example-file-viewer-filename
      * @exampleComponent limel-example-file-viewer-inbuilt-actions
      * @exampleComponent limel-example-file-viewer-custom-actions
      * @exampleComponent limel-example-file-viewer-with-picker
-     * @private 
+     * @beta 
      */
     interface LimelFileViewer {
         /**
@@ -6602,7 +6606,7 @@ declare namespace LocalJSX {
         "open"?: boolean;
     }
     /**
-     * @exampleComponent limel-example-picker-single
+     * @exampleComponent limel-example-picker-basic
      * @exampleComponent limel-example-picker-multiple
      * @exampleComponent limel-example-picker-icons
      * @exampleComponent limel-example-picker-value-as-object
@@ -6625,6 +6629,10 @@ declare namespace LocalJSX {
           * Static actions that can be clicked by the user.
          */
         "actions"?: Array<ListItem<Action>>;
+        /**
+          * Only used if no `searcher` is provided. The picker will then use a default search function that filters the `allItems` based on the `text` and `secondaryText` properties of the items. This way, custom search functions are typically only needed when the search is done on the server. For performance reasons, the default searcher will never return more than 20 items, but if there are more than 20 items, the rest can be found by typing more characters in the search field.
+         */
+        "allItems"?: Array<ListItem<PickerValue>>;
         /**
           * Whether badge icons should be used in the result list or not
          */
@@ -8154,13 +8162,13 @@ declare module "@stencil/core" {
              * This will allow users to preview the file in a fullscreen mode with the
              * browser and take advantage of for example native zooming and panning
              * functionalities.
-             * @exampleComponent limel-example-file-viewer
+             * @exampleComponent limel-example-file-viewer-basic
              * @exampleComponent limel-example-file-viewer-office
              * @exampleComponent limel-example-file-viewer-filename
              * @exampleComponent limel-example-file-viewer-inbuilt-actions
              * @exampleComponent limel-example-file-viewer-custom-actions
              * @exampleComponent limel-example-file-viewer-with-picker
-             * @private 
+             * @beta 
              */
             "limel-file-viewer": LocalJSX.LimelFileViewer & JSXBase.HTMLAttributes<HTMLLimelFileViewerElement>;
             /**
@@ -8424,7 +8432,7 @@ declare module "@stencil/core" {
              */
             "limel-menu-surface": LocalJSX.LimelMenuSurface & JSXBase.HTMLAttributes<HTMLLimelMenuSurfaceElement>;
             /**
-             * @exampleComponent limel-example-picker-single
+             * @exampleComponent limel-example-picker-basic
              * @exampleComponent limel-example-picker-multiple
              * @exampleComponent limel-example-picker-icons
              * @exampleComponent limel-example-picker-value-as-object

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.76.3",
+  "version": "37.78.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -28,7 +28,7 @@
     "lint:fix": "npm run lint:src:fix && npm run lint:scss:fix",
     "lint:prod": "npm run lint:src:prod && npm run lint:scss:prod",
     "lint:src": "eslint \"**/*.{ts,tsx,js}\" --max-warnings=99 && prettier -c \"{!(package*).json,.prettierrc}\"",
-    "lint:src:fix": "eslint \"**/*.{ts,tsx,js}\" --fix && prettier --write \"{!(package*).json,.prettierrc}\"",
+    "lint:src:fix": "eslint \"**/*.{ts,tsx,js}\" --fix --quiet && prettier --write \"{!(package*).json,.prettierrc}\"",
     "lint:src:prod": "eslint \"**/*.{ts,tsx,js}\" --rule \"linebreak-style: [error, unix]\" --max-warnings=99 && prettier -c \"{!(package*).json,.prettierrc}\"",
     "lint:scss": "prettier -c --ignore-path ./.gitignore **/*.scss",
     "lint:scss:fix": "prettier --write --ignore-path ./.gitignore **/*.scss",
@@ -73,7 +73,7 @@
     "eslint-plugin-sonarjs": "^3.0.1",
     "eslint-plugin-tsdoc": "^0.4.0",
     "flatpickr": "^4.6.13",
-    "globals": "^15.13.0",
+    "globals": "^15.14.0",
     "html-escaper": "^3.0.3",
     "jest": "^27.5.1",
     "jest-cli": "^27.5.1",

package/dist/lime-elements/p-488decb0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["detectExtension","fileName","url","pathLike","extension","split","pop","toLowerCase","extensionsToTypes","pdf","jpg","jpeg","heic","bmp","png","gif","svg","svgz","ep","eps","avi","flv","h264","mov","mp4","mwv","mkv","mp3","wav","wma","ogg","txt","json","html","xml","doc","docx","odt","dot","dotx","docm","dotm","pot","ppt","pptx","odp","potx","potm","pps","ppsx","ppsm","pptm","ppam","pages","xls","xlsx","xlsm","xlsb","ods","csv","numbers","Fullscreen","constructor","element","this","requestFullscreen","enter","exitFullscreen","exit","bind","window","document","toggle","isFullscreen","fullscreenElement","mozFullScreenElement","webkitFullscreenElement","msFullscreenElement","msRequestFullscreen","mozRequestFullScreen","webkitRequestFullscreen","msExitFullscreen","mozCancelFullScreen","webkitExitFullscreen","isSupported","fileViewerCss","FileViewer","hostRef","renderPdf","h","class","renderActionMenu","src","fileUrl","loading","renderImage","renderButtons","alt","renderVideo","controls","renderAudio","renderText","data","type","renderOffice","getOfficeViewerUrl","isOfficeFileAccessibleViaURL","fileType","startsWith","officeViewers","officeViewer","renderNoFileSupportMessage","name","size","role","getTranslation","renderDownloadButton","renderToggleFullscreenButton","renderOpenInNewTabButton","allowFullscreen","fullscreen","icon","label","id","onClick","handleToggleFullscreen","elementId","openDirection","allowDownload","download","filename","href","target","allowOpenInNewTab","rel","actions","items","onSelect","emitOnAction","slot","createURL","async","includes","response","fetch","blob","URL","createObjectURL","event","stopPropagation","action","emit","detail","HostElement","render","limeBranded","renderFileViewer","newUrl","oldUrl","fileViewerFunctions","image","video","audio","text","office","fileViewerFunction","key","translate","get","language"],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n    const pathLike = fileName || url;\n    if (!pathLike) {\n        return 'unknown';\n    }\n\n    const extension = pathLike.split('.').pop().toLowerCase();\n    const extensionsToTypes = {\n        pdf: 'pdf',\n        jpg: 'image',\n        jpeg: 'image',\n        heic: 'image',\n        bmp: 'image',\n        png: 'image',\n        gif: 'image',\n        svg: 'image',\n        svgz: 'image',\n        ep: 'image',\n        eps: 'image',\n        avi: 'video',\n        flv: 'video',\n        h264: 'video',\n        mov: 'video',\n        mp4: 'video',\n        mwv: 'video',\n        mkv: 'video',\n        mp3: 'audio',\n        wav: 'audio',\n        wma: 'audio',\n        ogg: 'audio',\n        txt: 'text',\n        json: 'text',\n        html: 'text',\n        xml: 'text',\n        // Word\n        doc: 'office',\n        docx: 'office',\n        odt: 'office',\n        dot: 'office',\n        dotx: 'office',\n        docm: 'office', // not supported\n        dotm: 'office', // not yet tested\n        // Presentation\n        pot: 'office', // not tested\n        ppt: 'office',\n        pptx: 'office',\n        odp: 'office',\n        potx: 'office', // not supported\n        potm: 'office', // not supported\n        pps: 'office',\n        ppsx: 'office',\n        ppsm: 'office', // not supported\n        pptm: 'office', // not supported\n        ppam: 'office', // not tested\n        pages: 'office', // not supported (Apple)\n        // Spreadsheet\n        xls: 'office',\n        xlsx: 'office',\n        xlsm: 'office',\n        xlsb: 'office',\n        ods: 'office',\n        csv: 'office', // not supported\n        numbers: 'office', // not supported (Apple)\n    };\n\n    return extensionsToTypes[extension] || 'unknown';\n}\n","export class Fullscreen {\n    private enter: () => void;\n    private exit: () => void;\n\n    constructor(element: any) {\n        this.enter =\n            element.requestFullscreen ||\n            element.msRequestFullscreen ||\n            element.mozRequestFullScreen ||\n            element.webkitRequestFullscreen;\n        this.enter = this.enter.bind(element);\n        const doc: any = window.document;\n        this.exit =\n            doc.exitFullscreen ||\n            doc.msExitFullscreen ||\n            doc.mozCancelFullScreen ||\n            doc.webkitExitFullscreen;\n    }\n\n    public requestFullscreen = () => {\n        if (this.enter) {\n            this.enter();\n        }\n    };\n\n    public exitFullscreen = () => {\n        if (this.exit) {\n            this.exit.bind(window.document)();\n        }\n    };\n\n    public toggle = () => {\n        const doc: any = window.document;\n        const isFullscreen =\n            doc.fullscreenElement ||\n            doc.mozFullScreenElement ||\n            doc.webkitFullscreenElement ||\n            doc.msFullscreenElement;\n\n        if (isFullscreen) {\n            this.exitFullscreen();\n        } else {\n            this.requestFullscreen();\n        }\n    };\n\n    public isSupported(): boolean {\n        return !!this.requestFullscreen;\n    }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n    isolation: isolate;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n    max-height: 100%;\n    max-width: 100%;\n    box-sizing: border-box;\n}\n\niframe {\n    border: none;\n    width: 100%;\n    height: 100%;\n    min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n    min-width: 7rem;\n    object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n    width: 100%;\n    height: auto;\n}\n\naudio {\n    width: 100%;\n}\n\nobject {\n    width: 100%;\n    height: 100%;\n}\n\nobject[type='application/pdf'] {\n    min-height: 20rem;\n    // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n    border-radius: 0.25rem;\n    padding-right: $size-of-buttons;\n\n    overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n    background-color: rgb(var(--color-gray-darker));\n\n    object[type='text/plain'] {\n        max-width: 50rem;\n        max-height: calc(100% - 2rem);\n    }\n}\n\n:host(:fullscreen) {\n    @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n    // this is repetition of the previous block,\n    // but needed for Safari to work.\n    // Cannot write SCSS rules for `:host` using commas for some reason.\n    // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n    // So you have to repeat it sadly.\n    @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n    Component,\n    Element,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { Languages } from '../date-picker/date.types';\nimport { ListItem } from '../list/list-item.types';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\nimport { LimelMenuCustomEvent } from '../../components';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n *\n * @exampleComponent limel-example-file-viewer\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n * @private\n */\n\n@Component({\n    tag: 'limel-file-viewer',\n    shadow: true,\n    styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n    /**\n     * Link to the file\n     */\n    @Prop({ reflect: true })\n    public url: string;\n\n    /**\n     * The name of the file that must also contains its extension.\n     * This overrides the filename that the `url` ends with.\n     * Useful when the `url` does not contain the filename.\n     * When specified, the `filename` will be used as filename of\n     * the downloaded file.\n     */\n    @Prop({ reflect: true })\n    public filename?: string;\n\n    /**\n     * An optional alternative text, mainly for assistive technologies and screen readers.\n     * It is used for only image files, as an `alt` attribute.\n     * Should optimally hold a description of the image,\n     * which is also displayed on the page if the image can't be loaded for some reason.\n     */\n    @Prop({ reflect: true })\n    public alt?: string;\n\n    /**\n     * Displays a button that allows the user to view the file\n     * in fullscreen mode.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowFullscreen?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to open the file\n     * in a new browser tab.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowOpenInNewTab?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to download the file.\n     * Note that due to the browser's security policies,\n     * the file should be hosted on the same domain\n     * for the download button to work properly.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowDownload?: boolean = false;\n\n    /**\n     * Defines the localization for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Defines the third-party viewer that should be used to render\n     * the content of office files, such as word processing documents,\n     * presentations, or spreadsheets.\n     */\n    @Prop({ reflect: true })\n    public officeViewer: OfficeViewer = 'microsoft-office';\n\n    /**\n     * An array of custom actions that can be displayed\n     * as an action menu on the file which is being displayed.\n     */\n    @Prop()\n    public actions: ListItem[];\n\n    /**\n     * Emitted when a custom action is selected from the action menu.\n     */\n    @Event()\n    public action: EventEmitter<ListItem>;\n\n    @Element()\n    public HostElement: HTMLLimelFileViewerElement;\n\n    private fullscreen: Fullscreen;\n\n    @State()\n    private isFullscreen: boolean = false;\n\n    @State()\n    private fileType: FileType;\n\n    /**\n     * True while the file is being loaded.\n     */\n    @State()\n    private loading: boolean = true;\n\n    @State()\n    private fileUrl: string = '';\n\n    constructor() {\n        this.fullscreen = new Fullscreen(this.HostElement);\n    }\n\n    public async componentWillLoad() {\n        this.fileType = detectExtension(this.filename, this.url);\n        await this.createURL(this.fileType);\n    }\n\n    public render() {\n        if (!this.isOfficeFileAccessibleViaURL) {\n            return this.renderNoFileSupportMessage();\n        }\n\n        if (this.loading) {\n            return <limel-spinner size=\"x-small\" limeBranded={false} />;\n        }\n\n        return this.renderFileViewer();\n    }\n\n    @Watch('url')\n    protected async watchUrl(newUrl: string, oldUrl: string) {\n        if (newUrl === oldUrl) {\n            return;\n        }\n\n        this.loading = true;\n        this.fileType = detectExtension(this.filename, this.fileUrl);\n        await this.createURL(this.fileType);\n    }\n\n    private renderFileViewer() {\n        const fileViewerFunctions = {\n            pdf: this.renderPdf,\n            image: this.renderImage,\n            video: this.renderVideo,\n            audio: this.renderAudio,\n            text: this.renderText,\n            office: this.renderOffice,\n        };\n        const fileViewerFunction =\n            fileViewerFunctions[this.fileType] ||\n            this.renderNoFileSupportMessage;\n\n        return fileViewerFunction();\n    }\n\n    private renderPdf = () => {\n        return [\n            <div class=\"action-menu-for-pdf-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe src={this.fileUrl} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderImage = () => {\n        return [\n            this.renderButtons(),\n            <img src={this.fileUrl} alt={this.alt} loading=\"lazy\" />,\n        ];\n    };\n\n    private renderVideo = () => {\n        return (\n            <video controls>\n                <source src={this.fileUrl} />\n            </video>\n        );\n    };\n\n    private renderAudio = () => {\n        return (\n            <audio controls>\n                <source src={this.fileUrl} />\n            </audio>\n        );\n    };\n\n    private renderText = () => {\n        return [\n            this.renderButtons(),\n            <object data={this.fileUrl} type=\"text/plain\" />,\n        ];\n    };\n\n    private renderOffice = () => {\n        return [\n            <div class=\"action-menu-for-office-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe\n                src={\n                    this.getOfficeViewerUrl() + this.fileUrl + '&embedded=true'\n                }\n                loading=\"lazy\"\n            />,\n        ];\n    };\n\n    private isOfficeFileAccessibleViaURL = () => {\n        return (\n            this.fileType === 'office' &&\n            !(\n                this.fileUrl.startsWith('http://') ||\n                this.fileUrl.startsWith('https://')\n            )\n        );\n    };\n\n    private getOfficeViewerUrl = () => {\n        const officeViewers = {\n            'microsoft-office':\n                'https://view.officeapps.live.com/op/embed.aspx?src=',\n            'google-drive': 'https://docs.google.com/gview?url=',\n        };\n\n        return officeViewers[this.officeViewer];\n    };\n\n    private renderNoFileSupportMessage = () => {\n        return (\n            <div class=\"no-support\">\n                <limel-icon\n                    class=\"icon--warning\"\n                    name=\"brake_warning\"\n                    size=\"large\"\n                    role=\"presentation\"\n                />\n                <p>{this.getTranslation('message.unsupported-filetype')}</p>\n                {this.renderDownloadButton()}\n            </div>\n        );\n    };\n\n    private renderButtons = () => {\n        return (\n            <div class=\"buttons\">\n                {this.renderActionMenu()}\n                {this.renderToggleFullscreenButton()}\n                {this.renderDownloadButton()}\n                {this.renderOpenInNewTabButton()}\n            </div>\n        );\n    };\n\n    private renderToggleFullscreenButton = () => {\n        if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n            return;\n        }\n\n        const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n        // eslint-disable-next-line multiline-ternary\n        const label = this.isFullscreen\n            ? // eslint-disable-next-line multiline-ternary\n              this.getTranslation('exit-fullscreen')\n            : this.getTranslation('open-in-fullscreen');\n\n        return [\n            <button\n                class=\"button--toggle-fullscreen\"\n                id=\"tooltip-toggle-fullscreen\"\n                role=\"button\"\n                onClick={this.handleToggleFullscreen}\n            >\n                <limel-icon name={icon} />\n                <limel-tooltip\n                    label={label}\n                    elementId=\"tooltip-toggle-fullscreen\"\n                    openDirection=\"left\"\n                />\n            </button>,\n        ];\n    };\n\n    private renderDownloadButton = () => {\n        if (!this.allowDownload || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--download\"\n                id=\"tooltip-download\"\n                role=\"button\"\n                download={this.filename ? this.filename : ''}\n                href={this.fileUrl}\n                target=\"_blank\"\n            >\n                <limel-icon name=\"download_2\" />\n                <limel-tooltip\n                    label={this.getTranslation('download')}\n                    elementId=\"tooltip-download\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderOpenInNewTabButton = () => {\n        if (!this.allowOpenInNewTab || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--new-tab\"\n                id=\"tooltip-new-tab\"\n                role=\"button\"\n                href={this.fileUrl}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <limel-icon name=\"external_link\" />\n                <limel-tooltip\n                    label={this.getTranslation('open-in-new-tab')}\n                    elementId=\"tooltip-new-tab\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderActionMenu = () => {\n        if (!this.actions || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"action-menu\"\n                items={this.actions}\n                onSelect={this.emitOnAction}\n                open-direction=\"left\"\n            >\n                <button\n                    class=\"button--action\"\n                    id=\"tooltip-more\"\n                    role=\"button\"\n                    slot=\"trigger\"\n                >\n                    <limel-icon name=\"menu_2\" />\n                    <limel-tooltip\n                        label={this.getTranslation('more-actions')}\n                        elementId=\"tooltip-more\"\n                        openDirection=\"left\"\n                    />\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private createURL = async (fileType: string) => {\n        if (['pdf'].includes(fileType)) {\n            const response = await fetch(this.url);\n            const blob = await response.blob();\n\n            this.fileUrl = URL.createObjectURL(blob);\n        } else {\n            this.fileUrl = this.url;\n        }\n\n        this.loading = false;\n    };\n\n    private handleToggleFullscreen = () => {\n        if (this.fullscreen.isSupported()) {\n            this.fullscreen.toggle();\n            this.isFullscreen = !this.isFullscreen;\n        }\n    };\n\n    private emitOnAction = (event: LimelMenuCustomEvent<ListItem>) => {\n        event.stopPropagation();\n        this.action.emit(event.detail);\n    };\n\n    private getTranslation(key: string) {\n        return translate.get(`file-viewer.${key}`, this.language);\n    }\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-68a8b724.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as s,g as e}from"./p-443111b3.js";import{i as n}from"./p-5e7b7b03.js";import{T as h,E as r,a as o,b as l,c as a,d as c,A as d,e as u,f,g as p}from"./p-e03dfe70.js";import{c as m}from"./p-96460db3.js";import{g as b,c as y}from"./p-2f777fdb.js";import{d as g}from"./p-18c97232.js";import"./p-c93050d6.js";import"./p-365098fe.js";import"./p-d529bb7d.js";import"./p-858c6b82.js";const v=":host{position:relative;display:block}:host([hidden]){display:none}";const w=300;const j="limel-chip-set";const C=class{constructor(s){t(this,s);this.change=i(this,"change",7);this.interact=i(this,"interact",7);this.action=i(this,"action",7);this.chipSetEditMode=false;this.getValueId=t=>{const i=t.value;if(!!i&&typeof i==="object"){return i.id}return i};this.createChips=t=>{if(!t){return[]}if(this.multiple){const i=t;return i.map(this.createChip)}const i=t;return[this.createChip(i)]};this.createChip=t=>{const i=b(t.icon);const s=y(t.icon,t.iconColor);const e=this.getValueId(t);return{id:`${e}`,text:t.text,removable:true,icon:i?{name:i,color:s}:undefined,value:t,menuItems:t.actions}};this.search=async t=>{const i=setTimeout((()=>{this.loading=true}));const s=await this.searcher(this.textValue);clearTimeout(i);this.handleSearchResult(t,s)};this.disabled=false;this.readonly=false;this.label=undefined;this.searchLabel=undefined;this.helperText=undefined;this.leadingIcon=undefined;this.emptyResultMessage=undefined;this.required=false;this.invalid=false;this.value=undefined;this.searcher=undefined;this.multiple=false;this.delimiter=null;this.actions=[];this.actionPosition="bottom";this.actionScrollBehavior="sticky";this.badgeIcons=false;this.items=undefined;this.textValue="";this.loading=false;this.chips=[];this.handleTextInput=this.handleTextInput.bind(this);this.handleInputKeyDown=this.handleInputKeyDown.bind(this);this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this);this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this);this.handleChange=this.handleChange.bind(this);this.handleInteract=this.handleInteract.bind(this);this.handleListChange=this.handleListChange.bind(this);this.handleActionListChange=this.handleActionListChange.bind(this);this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this);this.handleCloseMenu=this.handleCloseMenu.bind(this);this.onListKeyDown=this.onListKeyDown.bind(this);this.portalId=m();this.debouncedSearch=g(this.search,w)}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.chipSet=this.host.shadowRoot.querySelector(j)}disconnectedCallback(){this.debouncedSearch.cancel()}async componentWillUpdate(){this.chipSetEditMode=false;if(this.chipSet){this.chipSetEditMode=await this.chipSet.getEditMode()}}render(){const t={};if(!this.multiple){t.maxItems=1}return[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,invalid:this.invalid,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:false,clearAllButton:this.multiple&&!this.chipSetEditMode},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}renderDelimiter(){if(this.multiple){return this.delimiter}return null}renderDropdown(){const t=this.getDropdownContent();const i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();if(this.actionPosition==="top"){i.push(s)}if(t){i.push(t)}if(this.actionPosition==="bottom"){i.push(s)}}return this.renderPortal(i)}getActionContent(){var t,i;const e=(i=(t=this.actions)===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;if(e===0){return null}return[s("limel-list",{class:{"static-actions-list":true,"is-on-top":this.actionPosition==="top","is-at-bottom":this.actionPosition==="bottom","has-position-sticky":this.actionScrollBehavior==="sticky"},badgeIcons:true,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){if(this.isFull()){return false}return!!this.chipSetEditMode}getDropdownContent(){var t;if(!this.shouldShowDropDownContent()){return}if(this.loading){return this.renderSpinner()}if(!((t=this.items)===null||t===void 0?void 0:t.length)){return this.renderEmptyMessage()}return this.renderListResult()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:false}))}renderEmptyMessage(){if(!this.emptyResultMessage){return}const t={color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"};return s("p",{style:t},this.emptyResultMessage)}renderListResult(){return s("limel-list",{badgeIcons:this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[h,r,o].includes(t.key);const s=[l,a,c].includes(t.keyCode);if(i||s){this.chipSet.setFocus()}}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:true,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement;const i=document.querySelector(`#${this.portalId}`);if(n(t,this.host)||n(t,i)){return}this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i;this.debouncedSearch(i);if(i===""){this.debouncedSearch.flush()}}handleListChange(t){var i;t.stopPropagation();if(!this.value||this.value!==t.detail){let i=t.detail;if(this.multiple){i=[...this.value,t.detail]}this.change.emit(i);this.items=[]}if(this.multiple){this.textValue="";(i=this.chipSet)===null||i===void 0?void 0:i.setFocus(true)}}handleActionListChange(t){t.stopPropagation();if(!t.detail){return}this.action.emit(t.detail.value);this.items=[]}handleInputFieldFocus(){const t=this.textValue;this.debouncedSearch(t)}handleChange(t){t.stopPropagation();let i=null;if(this.multiple){const s=t.detail;i=s.map((t=>this.value.find((i=>{const s=this.getValueId(i);return`${s}`===t.id}))))}this.change.emit(i)}handleInteract(t){t.stopPropagation();this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=(t.key===h||t.keyCode===l)&&!t.altKey&&!t.metaKey&&!t.shiftKey;const s=t.key===d||t.keyCode===u;const e=t.key===f||t.keyCode===p;if(!i&&!s&&!e){return}const n=document.querySelector(` #${this.portalId} limel-list`);if(!n){return}t.preventDefault();if(i||e){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child");t.focus();return}if(s){const t=n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child");t.focus()}}handleDropdownKeyDown(t){const i=t.key===r||t.keyCode===a;if(i){t.preventDefault();this.textValue="";this.chipSet.setFocus(true)}}handleSearchResult(t,i){if(t===this.textValue){this.items=i;if(this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=false}}handleCloseMenu(){if(this.items.length>0){return}this.clearInputField()}clearInputField(){this.chipSet.emptyInput();this.textValue="";this.handleSearchResult("",[]);this.debouncedSearch.cancel()}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"]}}};C.style=v;export{C as limel_picker};
-//# sourceMappingURL=p-68a8b724.entry.js.map

package/dist/lime-elements/p-68a8b724.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pickerCss","SEARCH_DEBOUNCE","CHIP_SET_TAG_NAME","Picker","constructor","hostRef","this","chipSetEditMode","getValueId","item","value","id","createChips","multiple","listItems","map","createChip","listItem","name","getIconName","icon","color","getIconFillColor","iconColor","valueId","text","removable","undefined","menuItems","actions","search","async","query","timeoutId","setTimeout","loading","result","searcher","textValue","clearTimeout","handleSearchResult","handleTextInput","bind","handleInputKeyDown","handleDropdownKeyDown","handleInputFieldFocus","handleChange","handleInteract","handleListChange","handleActionListChange","handleStopEditAndBlur","handleCloseMenu","onListKeyDown","portalId","createRandomString","debouncedSearch","debounce","componentWillLoad","chips","componentDidLoad","chipSet","host","shadowRoot","querySelector","disconnectedCallback","cancel","getEditMode","render","props","maxItems","h","Object","assign","type","inputType","label","helperText","leadingIcon","disabled","invalid","delimiter","renderDelimiter","readonly","required","searchLabel","onInput","onKeyDown","onChange","onInteract","onStartEdit","onStopEdit","emptyInputOnBlur","clearAllButton","renderDropdown","onChangeValue","dropDownContent","getDropdownContent","content","shouldShowDropDownContent","actionContent","getActionContent","actionPosition","push","renderPortal","actionCount","_b","_a","length","class","actionScrollBehavior","badgeIcons","items","removeUnusedPropertiesOnAction","action","isFull","renderSpinner","renderEmptyMessage","renderListResult","style","width","display","padding","limeBranded","emptyResultMessage","margin","event","keyFound","TAB","ESCAPE","ENTER","includes","key","keyCodeFound","TAB_KEY_CODE","ESCAPE_KEY_CODE","ENTER_KEY_CODE","keyCode","setFocus","dropdownZIndex","getComputedStyle","getPropertyValue","visible","containerId","inheritParentWidth","containerStyle","open","allowClicksElement","onDismiss","element","activeElement","document","portalElement","isDescendant","clearInputField","stopPropagation","detail","flush","newValue","change","emit","chip","find","interact","isForwardTab","altKey","metaKey","shiftKey","isUp","ARROW_UP","ARROW_UP_KEY_CODE","isDown","ARROW_DOWN","ARROW_DOWN_KEY_CODE","list","preventDefault","listElement","focus","isEscape","values","filter","emptyInput"],"sources":["./src/components/picker/picker.scss?tag=limel-picker&encapsulation=shadow","./src/components/picker/picker.tsx"],"sourcesContent":["// Note! The `--dropdown-z-index` property is used from `picker.tsx`.\n/**\n  * @prop --dropdown-z-index: z-index of the dropdown menu.\n  */\n\n:host {\n    position: relative;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n","import { Action } from '../collapsible-section/action';\nimport { ActionPosition, ActionScrollBehavior } from '../picker/actions.types';\nimport { Chip } from '../chip-set/chip.types';\nimport { ListItem } from '../list/list-item.types';\nimport { Searcher } from '../picker/searcher.types';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n    ARROW_DOWN,\n    ARROW_DOWN_KEY_CODE,\n    ARROW_UP,\n    ARROW_UP_KEY_CODE,\n    ENTER,\n    ENTER_KEY_CODE,\n    ESCAPE,\n    ESCAPE_KEY_CODE,\n    TAB,\n    TAB_KEY_CODE,\n} from '../../util/keycodes';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    LimelChipSetCustomEvent,\n    LimelListCustomEvent,\n} from '../../components';\nimport { getIconFillColor, getIconName } from '../icon/get-icon-props';\nimport { PickerValue } from './value.types';\nimport { DebouncedFunc, debounce } from 'lodash-es';\n\nconst SEARCH_DEBOUNCE = 300;\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\n\n/**\n * @exampleComponent limel-example-picker-single\n * @exampleComponent limel-example-picker-multiple\n * @exampleComponent limel-example-picker-icons\n * @exampleComponent limel-example-picker-value-as-object\n * @exampleComponent limel-example-picker-value-as-object-with-actions\n * @exampleComponent limel-example-picker-empty-suggestions\n * @exampleComponent limel-example-picker-leading-icon\n * @exampleComponent limel-example-picker-static-actions\n * @exampleComponent limel-example-picker-composite\n */\n@Component({\n    tag: 'limel-picker',\n    shadow: true,\n    styleUrl: 'picker.scss',\n})\nexport class Picker {\n    /**\n     * True if the picker should be disabled\n     */\n    @Prop()\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing items,\n     * but allow interaction with existing items.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Text to display for the input field of the picker\n     */\n    @Prop()\n    public label: string;\n\n    /**\n     * Search label to display in the input field when searching\n     */\n    @Prop()\n    public searchLabel: string;\n\n    /**\n     * Optional helper text to display below the input field when it has focus\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Leading icon to show to the far left in the text field\n     */\n    @Prop()\n    public leadingIcon: string;\n\n    /**\n     * A message to display when the search returned an empty result\n     */\n    @Prop()\n    public emptyResultMessage: string;\n\n    /**\n     * True if the control requires a value\n     */\n    @Prop()\n    public required: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the input field is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Currently selected value or values. Where the value can be an object.\n     */\n    @Prop()\n    public value: ListItem<PickerValue> | Array<ListItem<PickerValue>>;\n\n    /**\n     * A search function that takes a search-string as an argument,\n     * and returns a promise that will eventually be resolved with\n     * an array of `ListItem`:s.\n     *\n     * See the docs for the type `Searcher` for type information on\n     * the searcher function itself.\n     */\n    @Prop()\n    public searcher: Searcher;\n\n    /**\n     * True if multiple values are allowed\n     */\n    @Prop()\n    public multiple: boolean = false;\n\n    /**\n     * Sets delimiters between chips. Works only when `multiple` is `true`.\n     */\n    @Prop({ reflect: true })\n    public delimiter: string = null;\n\n    /**\n     * Static actions that can be clicked by the user.\n     */\n    @Prop()\n    public actions: Array<ListItem<Action>> = [];\n\n    /**\n     * Position of the custom static actions in the picker's results dropdown.\n     * Can be set to `'top'` or `'bottom'`.\n     */\n    @Prop()\n    public actionPosition: ActionPosition = 'bottom';\n\n    /**\n     * Scroll behavior of the custom static actions, when user scrolls\n     * in the picker's results dropdown. Can be set to `'scroll'` which means\n     * the action items will scroll together with the list, or `'sticky'` which\n     * retains their position at the top or bottom of the drop down while\n     * scrolling.\n     */\n    @Prop()\n    public actionScrollBehavior: ActionScrollBehavior = 'sticky';\n\n    /**\n     * Whether badge icons should be used in the result list or not\n     */\n    @Prop({ reflect: true })\n    public badgeIcons: boolean = false;\n\n    /**\n     * Fired when a new value has been selected from the picker\n     */\n    @Event()\n    private change: EventEmitter<\n        ListItem<PickerValue> | Array<ListItem<PickerValue>>\n    >;\n\n    /**\n     * Fired when clicking on a selected value\n     */\n    @Event()\n    private interact: EventEmitter<ListItem<PickerValue>>;\n\n    /**\n     * Emitted when the user selects an action.\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @State()\n    private items: Array<ListItem<number | string>>;\n\n    @State()\n    private textValue: string = '';\n\n    @State()\n    private loading: boolean = false;\n\n    @State()\n    private chips: Chip[] = [];\n\n    @Element()\n    private host: HTMLLimelPickerElement;\n\n    // Should NOT be decorated with State(), since this\n    // should not trigger a re-render by itself.\n    private chipSetEditMode = false;\n\n    private debouncedSearch: DebouncedFunc<(query: string) => Promise<void>>;\n    private chipSet: HTMLLimelChipSetElement;\n    private portalId: string;\n\n    constructor() {\n        this.handleTextInput = this.handleTextInput.bind(this);\n        this.handleInputKeyDown = this.handleInputKeyDown.bind(this);\n        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);\n        this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n        this.handleInteract = this.handleInteract.bind(this);\n        this.handleListChange = this.handleListChange.bind(this);\n        this.handleActionListChange = this.handleActionListChange.bind(this);\n        this.handleStopEditAndBlur = this.handleStopEditAndBlur.bind(this);\n        this.handleCloseMenu = this.handleCloseMenu.bind(this);\n        this.onListKeyDown = this.onListKeyDown.bind(this);\n\n        this.portalId = createRandomString();\n        this.debouncedSearch = debounce(this.search, SEARCH_DEBOUNCE);\n    }\n\n    public componentWillLoad() {\n        this.chips = this.createChips(this.value);\n    }\n\n    public componentDidLoad() {\n        this.chipSet = this.host.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n    }\n\n    public disconnectedCallback() {\n        this.debouncedSearch.cancel();\n    }\n\n    public async componentWillUpdate() {\n        this.chipSetEditMode = false;\n        if (this.chipSet) {\n            this.chipSetEditMode = await this.chipSet.getEditMode();\n        }\n    }\n\n    public render() {\n        const props: {\n            maxItems?: number;\n        } = {};\n\n        if (!this.multiple) {\n            props.maxItems = 1;\n        }\n\n        return [\n            <limel-chip-set\n                type=\"input\"\n                inputType=\"search\"\n                label={this.label}\n                helperText={this.helperText}\n                leadingIcon={this.leadingIcon}\n                value={this.chips}\n                disabled={this.disabled}\n                invalid={this.invalid}\n                delimiter={this.renderDelimiter()}\n                readonly={this.readonly}\n                required={this.required}\n                searchLabel={this.searchLabel}\n                onInput={this.handleTextInput}\n                onKeyDown={this.handleInputKeyDown}\n                onChange={this.handleChange}\n                onInteract={this.handleInteract}\n                onStartEdit={this.handleInputFieldFocus}\n                onStopEdit={this.handleStopEditAndBlur}\n                emptyInputOnBlur={false}\n                clearAllButton={this.multiple && !this.chipSetEditMode}\n                {...props}\n            />,\n            this.renderDropdown(),\n        ];\n    }\n\n    @Watch('value')\n    protected onChangeValue() {\n        this.chips = this.createChips(this.value);\n    }\n\n    private renderDelimiter() {\n        if (this.multiple) {\n            return this.delimiter;\n        }\n\n        return null;\n    }\n\n    private getValueId = (item: ListItem) => {\n        const value = item.value;\n        if (!!value && typeof value === 'object') {\n            return value.id;\n        }\n\n        return value;\n    };\n\n    private createChips = (value: ListItem | ListItem[]): Chip[] => {\n        if (!value) {\n            return [];\n        }\n\n        if (this.multiple) {\n            const listItems: ListItem[] = value as ListItem[];\n\n            return listItems.map(this.createChip);\n        }\n\n        const listItem: ListItem = value as ListItem;\n\n        return [this.createChip(listItem)];\n    };\n\n    private createChip = (listItem: ListItem): Chip => {\n        const name = getIconName(listItem.icon);\n        const color = getIconFillColor(listItem.icon, listItem.iconColor);\n        const valueId = this.getValueId(listItem);\n\n        return {\n            id: `${valueId}`,\n            text: listItem.text,\n            removable: true,\n            icon: name ? { name: name, color: color } : undefined,\n            value: listItem,\n            menuItems: listItem.actions,\n        };\n    };\n\n    /**\n     * Renders the dropdown with the items to pick from, or a spinner if the picker\n     * is waiting for items to be received\n     *\n     * @returns picker dropdown\n     */\n    private renderDropdown() {\n        const dropDownContent = this.getDropdownContent();\n\n        const content = [];\n\n        if (this.shouldShowDropDownContent()) {\n            const actionContent = this.getActionContent();\n            if (this.actionPosition === 'top') {\n                content.push(actionContent);\n            }\n\n            if (dropDownContent) {\n                content.push(dropDownContent);\n            }\n\n            if (this.actionPosition === 'bottom') {\n                content.push(actionContent);\n            }\n        }\n\n        return this.renderPortal(content);\n    }\n\n    private getActionContent() {\n        const actionCount = this.actions?.length ?? 0;\n        if (actionCount === 0) {\n            return null;\n        }\n\n        return [\n            <limel-list\n                class={{\n                    'static-actions-list': true,\n                    'is-on-top': this.actionPosition === 'top',\n                    'is-at-bottom': this.actionPosition === 'bottom',\n                    'has-position-sticky':\n                        this.actionScrollBehavior === 'sticky',\n                }}\n                badgeIcons={true}\n                type={'selectable'}\n                onChange={this.handleActionListChange}\n                items={this.actions.map(this.removeUnusedPropertiesOnAction)}\n            />,\n        ];\n    }\n\n    private removeUnusedPropertiesOnAction(\n        action: ListItem<Action>,\n    ): ListItem<Action> {\n        return {\n            ...action,\n            actions: [],\n        };\n    }\n\n    private shouldShowDropDownContent() {\n        if (this.isFull()) {\n            return false;\n        }\n\n        return !!this.chipSetEditMode;\n    }\n\n    private getDropdownContent() {\n        if (!this.shouldShowDropDownContent()) {\n            return;\n        }\n\n        if (this.loading) {\n            return this.renderSpinner();\n        }\n\n        if (!this.items?.length) {\n            return this.renderEmptyMessage();\n        }\n\n        return this.renderListResult();\n    }\n\n    /**\n     * Returns true if the picker is \"full\"\n     * The picker is considered to be full if it has a value and only one is allowed\n     *\n     * @returns true if the picker is full\n     */\n    private isFull(): boolean {\n        return !this.multiple && !!this.value;\n    }\n\n    private renderSpinner() {\n        return (\n            <div\n                style={{\n                    width: '100%',\n                    display: 'flex',\n                    'align-items': 'center',\n                    'justify-content': 'center',\n                    padding: '1rem 0',\n                }}\n            >\n                <limel-spinner limeBranded={false} />\n            </div>\n        );\n    }\n\n    private renderEmptyMessage() {\n        if (!this.emptyResultMessage) {\n            return;\n        }\n\n        const style = {\n            color: 'rgb(var(--contrast-1100))',\n            'text-align': 'center',\n            margin: '0.5rem 1rem',\n        };\n\n        return <p style={style}>{this.emptyResultMessage}</p>;\n    }\n\n    private renderListResult() {\n        return (\n            <limel-list\n                badgeIcons={this.badgeIcons}\n                onChange={this.handleListChange}\n                onKeyDown={this.onListKeyDown}\n                type=\"selectable\"\n                items={this.items}\n            />\n        );\n    }\n\n    private onListKeyDown(event: KeyboardEvent) {\n        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);\n        const keyCodeFound = [\n            TAB_KEY_CODE,\n            ESCAPE_KEY_CODE,\n            ENTER_KEY_CODE,\n        ].includes(event.keyCode);\n        if (keyFound || keyCodeFound) {\n            this.chipSet.setFocus();\n        }\n    }\n\n    private renderPortal(content: any[] = []) {\n        const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n            '--dropdown-z-index',\n        );\n\n        return (\n            <limel-portal\n                visible={content.length > 0}\n                containerId={this.portalId}\n                inheritParentWidth={true}\n                containerStyle={{ 'z-index': dropdownZIndex }}\n            >\n                <limel-menu-surface\n                    open={content.length > 0}\n                    allowClicksElement={this.host}\n                    style={{\n                        '--mdc-menu-min-width': '100%',\n                        'max-height': 'inherit',\n                        display: 'flex',\n                    }}\n                    onDismiss={this.handleCloseMenu}\n                >\n                    {content}\n                </limel-menu-surface>\n            </limel-portal>\n        );\n    }\n\n    /**\n     * Check if a descendant still has focus. If not, reset text value and search result.\n     */\n    private handleStopEditAndBlur() {\n        // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null\n        // However, document.activeElement will return the actual focused element instead of the outermost shadow host\n        const element =\n            this.host.shadowRoot.activeElement || document.activeElement;\n        const portalElement = document.querySelector(`#${this.portalId}`);\n        if (\n            isDescendant(element as HTMLElement, this.host) ||\n            isDescendant(element as HTMLElement, portalElement as HTMLElement)\n        ) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    /**\n     * Input handler for the input field\n     *\n     * @param event - event\n     */\n    private async handleTextInput(event) {\n        event.stopPropagation();\n\n        const query = event.detail;\n        this.textValue = query;\n\n        this.debouncedSearch(query);\n        // If the search-query is an empty string, bypass debouncing.\n        if (query === '') {\n            this.debouncedSearch.flush();\n        }\n    }\n\n    private search = async (query: string) => {\n        const timeoutId = setTimeout(() => {\n            this.loading = true;\n        });\n        const result = (await this.searcher(this.textValue)) as Array<\n            ListItem<PickerValue>\n        >;\n        clearTimeout(timeoutId);\n        this.handleSearchResult(query, result);\n    };\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleListChange(\n        event: LimelListCustomEvent<ListItem<PickerValue>>,\n    ) {\n        event.stopPropagation();\n        if (!this.value || this.value !== event.detail) {\n            let newValue: ListItem<PickerValue> | Array<ListItem<PickerValue>> =\n                event.detail;\n            if (this.multiple) {\n                newValue = [\n                    ...(this.value as Array<ListItem<PickerValue>>),\n                    event.detail,\n                ];\n            }\n\n            this.change.emit(newValue);\n            this.items = [];\n        }\n\n        if (this.multiple) {\n            this.textValue = '';\n            this.chipSet?.setFocus(true);\n        }\n    }\n\n    /**\n     * Change handler for the list\n     *\n     * @param event - event\n     */\n    private handleActionListChange(\n        event: LimelListCustomEvent<ListItem<Action>>,\n    ) {\n        event.stopPropagation();\n        if (!event.detail) {\n            return;\n        }\n\n        this.action.emit(event.detail.value);\n        this.items = [];\n    }\n\n    /**\n     * Focus handler for the chip set\n     * Prevent focus if the picker has a value and does not support multiple values\n     */\n    private handleInputFieldFocus() {\n        const query = this.textValue;\n        this.debouncedSearch(query);\n    }\n\n    private handleChange(event: LimelChipSetCustomEvent<Chip | Chip[]>) {\n        event.stopPropagation();\n\n        let newValue = null;\n        if (this.multiple) {\n            const chips = event.detail as Chip[];\n            newValue = chips.map((chip) => {\n                return (this.value as ListItem[]).find((item) => {\n                    const valueId = this.getValueId(item);\n\n                    return `${valueId}` === chip.id;\n                });\n            });\n        }\n\n        this.change.emit(newValue);\n    }\n\n    private handleInteract(event: LimelChipSetCustomEvent<Chip>) {\n        event.stopPropagation();\n        this.interact.emit(event.detail ? event.detail.value : event.detail);\n    }\n\n    /**\n     * Key handler for the input field\n     * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard\n     *\n     * @param event - event\n     */\n    private handleInputKeyDown(event: KeyboardEvent) {\n        const isForwardTab =\n            (event.key === TAB || event.keyCode === TAB_KEY_CODE) &&\n            !event.altKey &&\n            !event.metaKey &&\n            !event.shiftKey;\n        const isUp =\n            event.key === ARROW_UP || event.keyCode === ARROW_UP_KEY_CODE;\n        const isDown =\n            event.key === ARROW_DOWN || event.keyCode === ARROW_DOWN_KEY_CODE;\n\n        if (!isForwardTab && !isUp && !isDown) {\n            return;\n        }\n\n        const list = document.querySelector(` #${this.portalId} limel-list`);\n        if (!list) {\n            return;\n        }\n\n        event.preventDefault();\n\n        if (isForwardTab || isDown) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:first-child',\n            );\n            listElement.focus();\n\n            return;\n        }\n\n        if (isUp) {\n            const listElement: HTMLElement = list.shadowRoot.querySelector(\n                '.mdc-deprecated-list-item:last-child',\n            );\n            listElement.focus();\n        }\n    }\n\n    /**\n     * Key handler for the dropdown\n     *\n     * @param event - event\n     */\n    private handleDropdownKeyDown(event: KeyboardEvent) {\n        const isEscape =\n            event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;\n\n        if (isEscape) {\n            event.preventDefault();\n            this.textValue = '';\n            this.chipSet.setFocus(true);\n        }\n    }\n\n    private handleSearchResult(query: string, result: ListItem[]) {\n        if (query === this.textValue) {\n            this.items = result;\n            if (this.multiple) {\n                const values = this.value as ListItem[];\n                this.items = result.filter((item) => {\n                    return !values.includes(item);\n                });\n            }\n\n            this.loading = false;\n        }\n    }\n\n    private handleCloseMenu() {\n        if (this.items.length > 0) {\n            return;\n        }\n\n        this.clearInputField();\n    }\n\n    private clearInputField() {\n        this.chipSet.emptyInput();\n        this.textValue = '';\n        this.handleSearchResult('', []);\n        this.debouncedSearch.cancel();\n    }\n}\n"],"mappings":"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"}