npm - @watermarkinsights/ripple - Versions diffs - 3.24.0 → 3.24.1 - Mend

@watermarkinsights/ripple 3.24.0 → 3.24.1

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

Files changed (554) hide show

package/dist/ripple/{p-2a9fa9b5.entry.js → p-54df11c8.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,c as t,f as i,h as o,H as s,g as n}from"./p-1c23de4a.js";import{d as r,i as l,s as a,j as d}from"./p-9fd3badc.js";const p=':host,wm-file{display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;height:3.5rem;padding:0 1.25rem;position:relative;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem;gap:1rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{white-space:nowrap}.file-wrapper .file.--error{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}.file-wrapper.checked .file:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f133";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{color:#c0392b;padding-top:0.25rem;font-style:italic}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.ch-measure{width:1ch !important;visibility:hidden}';const c=class{constructor(o){e(this,o);this.wmIntFilePreviewed=t(this,"wmIntFilePreviewed",7);this.wmIntFileDownloaded=t(this,"wmIntFileDownloaded",7);this.wmIntFileDeleted=t(this,"wmIntFileDeleted",7);this.wmFileClearErrorClicked=t(this,"wmFileClearErrorClicked",7);this.isWithinLegacyUploader=false;this.debouncedResize=r((()=>{this.isCondensed=this.el.clientWidth<500;i(this.el)}),50);this.file=undefined;this.showInfo="time";this.errorMessage=undefined;this.isCondensed=false}get fileData(){let e=this.file?JSON.parse(this.file):null;if(e&&e.progress&&typeof e.progress==="string"&&e.progress.match(/^[0-9]+$/)){e.progress=parseInt(e.progress.toString())}return e}get isUploading(){return this.fileData&&this.fileData.hasOwnProperty("progress")&&this.fileData.progress<100}get singleCharacterWidth(){return this.el.shadowRoot.querySelector(".ch-measure").clientWidth}get previewButtonTooltip(){return l.formatMessage({id:"file.previewButtonTooltip",defaultMessage:"Preview",description:"Tooltip of a button that triggers a file to be previewed"})}get downloadButtonTooltip(){return l.formatMessage({id:"file.downloadButtonTooltip",defaultMessage:"Download",description:"Tooltip of a button that triggers a file to be downloaded"})}get deleteButtonTooltip(){return l.formatMessage({id:"file.deleteButtonTooltip",defaultMessage:"Delete",description:"Tooltip of a button that triggers a file to be deleted"})}get previewActionMessage(){return l.formatMessage({id:"file.previewAction",defaultMessage:"Preview File",description:"Label of a button that triggers a file to be previewed"})}get downloadActionMessage(){return l.formatMessage({id:"file.downloadAction",defaultMessage:"Download File",description:"Label of a button that triggers a file to be downloaded"})}get deleteActionMessage(){return l.formatMessage({id:"file.deleteAction",defaultMessage:"Delete File",description:"Label of a button that triggers a file to be delete"})}get actionMenuLabel(){return l.formatMessage({id:"file.actionMenuLabel",defaultMessage:"Actions",description:"Label of a button that opens a menu of file actions"})}get clearButtonText(){return l.formatMessage({id:"file.clearErrorText",defaultMessage:"Clear",description:"Text for a button used to clear an error"})}generateClearButtonLabel(e){return l.formatMessage({id:"file.clearErrorLabel",defaultMessage:"Clear {fileName} error",description:"Label for a button used to clear an error, including filename"},{fileName:e})}componentWillLoad(){const e=this.el.getRootNode().host;if(e&&e.nodeName==="WM-UPLOADER"){if(e.type||e.uploaderType){this.isWithinLegacyUploader=true}}const t=new ResizeObserver((()=>this.debouncedResize()));t.observe(this.el)}componentDidRender(){this.truncateFileName(this.el.shadowRoot.querySelector(".file"))}previewFile(e){this.wmIntFilePreviewed.emit(e.id)}downloadFile(e){this.wmIntFileDownloaded.emit(e.id)}deleteFile(e){this.wmIntFileDeleted.emit(e.id)}truncateFileName(e){const t=e.querySelector(".left-group");const i=t.getBoundingClientRect().left;const o=e.querySelector(".right-group");const s=o?o.getBoundingClientRect().left:e.getBoundingClientRect().right-20;const n=e.querySelector(".filename");const r=s-i;let l=n.dataset.filename;const a=r>l.length*this.singleCharacterWidth;if(!a){const e=l.slice(l.lastIndexOf("."));const t=Math.floor(r/this.singleCharacterWidth);const i=3+3+e.length;let o=Math.max(2,t-i);const s=l.slice(0,o);const n=l.slice(l.indexOf(e)-3,l.length);l=`${s.trim()}...${n.trim()}`}n.textContent=l}handleFilenameMouseEnter(e,t){if(e.target.textContent.includes("...")){a("bottom",e.target,t)}}renderFileName(e,t){return o("div",{class:"left-group"},o("div",{class:"name-wrapper"},o("span",{class:"sr-only"},e),o("span",{"aria-hidden":"true",class:"filename","data-filename":e,onMouseEnter:t=>this.handleFilenameMouseEnter(t,e),onMouseLeave:()=>d()}),t&&o("span",{class:"sr-only"},"uploading"),o("div",{class:"ch-measure"})))}renderFileInfo(e,t){let i="";if(t==="time"&&e.lastUpdated){i=e.lastUpdated}else if(t==="size"&&e.size){i=e.size}return o("div",{class:"file-info"},i)}renderActionMenu(e){const t="download delete";const i=e.fileActions||t;const s=o("wm-menuitem",{icon:"f208",onClick:()=>this.previewFile(e)},this.previewActionMessage);const n=o("wm-menuitem",{icon:"f1da",onClick:()=>this.downloadFile(e)},this.downloadActionMessage);const r=o("wm-menuitem",{icon:"f1c0",onClick:()=>this.deleteFile(e)},this.deleteActionMessage);return o("wm-action-menu",{"action-menu-type":"icon",tooltip:this.actionMenuLabel,"tooltip-position":"bottom","label-for-identical-buttons":`${e.name} ${this.actionMenuLabel}`},i.includes("preview")&&s,i.includes("download")&&n,i.includes("delete")&&r)}renderFileActionButtons(e){const t="download delete";const i=e.fileActions||t;const s=o("wm-button",{class:"preview-button","button-type":"icononly",tooltip:this.previewButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":`preview ${e.name}`,icon:"f208",onClick:()=>this.previewFile(e)});const n=o("wm-button",{class:"download-button","button-type":"icononly",tooltip:this.downloadButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":`download ${e.name}`,icon:"f1da",onClick:()=>this.downloadFile(e)});const r=o("wm-button",{class:"delete-button","button-type":"icononly",tooltip:this.deleteButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":`delete ${e.name}`,icon:"f1c0",onClick:()=>this.deleteFile(e)});return o("div",{class:"file-controls"},i.includes("preview")&&s,i.includes("download")&&n,i.includes("delete")&&r)}renderFileInProgress(e){const t=e.type?`${e.name}.${e.type}`:e.name;return o("div",{class:"file-wrapper"},o("div",{class:"file --progress"},o("div",{class:"progress",style:{background:`linear-gradient(to right, rgba(67, 126, 142, 1) ${e.progress}%, transparent ${e.progress}%)`}}),this.renderFileName(t,this.isUploading)))}renderFileControls(e){const t=e.fileActions&&e.fileActions.split(" ").length===1;const i=this.isCondensed&&!t;return i?this.renderActionMenu(e):this.renderFileActionButtons(e)}renderFile(e){const t=e.type?`${e.name}.${e.type}`:e.name;const i=!this.isWithinLegacyUploader&&e.progress===100;return o("div",{class:`file-wrapper ${i?"checked":""}`},o("div",{class:`file ${this.errorMessage?"--error":""}`},this.renderFileName(t,this.isUploading),!this.errorMessage&&o("div",{class:`right-group ${this.isCondensed?"condensed":""}`},this.showInfo!=="none"&&this.renderFileInfo(e,this.showInfo),e.fileActions!==""&&this.renderFileControls(e)),this.errorMessage&&o("wm-button",{"permanently-delete":true,"button-type":"textonly","label-for-identical-buttons":this.generateClearButtonLabel(e.name),onClick:()=>this.wmFileClearErrorClicked.emit({name:e.name})},this.clearButtonText)),this.errorMessage&&o("div",{class:"error-message"},this.errorMessage))}render(){return o(s,{role:"listitem"},this.isUploading?this.renderFileInProgress(this.fileData):this.renderFile(this.fileData))}static get delegatesFocus(){return true}get el(){return n(this)}};c.style=p;export{c as wm_file};
-//# sourceMappingURL=p-2a9fa9b5.entry.js.map
+import{r as e,c as t,f as i,h as o,H as s,g as n}from"./p-1c23de4a.js";import{d as r,i as l,s as a,j as d}from"./p-edfba0e1.js";const p=':host,wm-file{display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{min-width:300px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;height:3.5rem;padding:0 1.25rem;position:relative;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:5rem;gap:1rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{white-space:nowrap}.file-wrapper .file.--error{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}.file-wrapper.checked .file:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f133";position:absolute;right:-44px;color:#088000;font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{color:#c0392b;padding-top:0.25rem;font-style:italic}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.ch-measure{width:1ch !important;visibility:hidden}';const c=class{constructor(o){e(this,o);this.wmIntFilePreviewed=t(this,"wmIntFilePreviewed",7);this.wmIntFileDownloaded=t(this,"wmIntFileDownloaded",7);this.wmIntFileDeleted=t(this,"wmIntFileDeleted",7);this.wmFileClearErrorClicked=t(this,"wmFileClearErrorClicked",7);this.isWithinLegacyUploader=false;this.debouncedResize=r((()=>{this.isCondensed=this.el.clientWidth<500;i(this.el)}),50);this.file=undefined;this.showInfo="time";this.errorMessage=undefined;this.isCondensed=false}get fileData(){let e=this.file?JSON.parse(this.file):null;if(e&&e.progress&&typeof e.progress==="string"&&e.progress.match(/^[0-9]+$/)){e.progress=parseInt(e.progress.toString())}return e}get isUploading(){return this.fileData&&this.fileData.hasOwnProperty("progress")&&this.fileData.progress<100}get singleCharacterWidth(){return this.el.shadowRoot.querySelector(".ch-measure").clientWidth}get previewButtonTooltip(){return l.formatMessage({id:"file.previewButtonTooltip",defaultMessage:"Preview",description:"Tooltip of a button that triggers a file to be previewed"})}get downloadButtonTooltip(){return l.formatMessage({id:"file.downloadButtonTooltip",defaultMessage:"Download",description:"Tooltip of a button that triggers a file to be downloaded"})}get deleteButtonTooltip(){return l.formatMessage({id:"file.deleteButtonTooltip",defaultMessage:"Delete",description:"Tooltip of a button that triggers a file to be deleted"})}get previewActionMessage(){return l.formatMessage({id:"file.previewAction",defaultMessage:"Preview File",description:"Label of a button that triggers a file to be previewed"})}get downloadActionMessage(){return l.formatMessage({id:"file.downloadAction",defaultMessage:"Download File",description:"Label of a button that triggers a file to be downloaded"})}get deleteActionMessage(){return l.formatMessage({id:"file.deleteAction",defaultMessage:"Delete File",description:"Label of a button that triggers a file to be delete"})}get actionMenuLabel(){return l.formatMessage({id:"file.actionMenuLabel",defaultMessage:"Actions",description:"Label of a button that opens a menu of file actions"})}get clearButtonText(){return l.formatMessage({id:"file.clearErrorText",defaultMessage:"Clear",description:"Text for a button used to clear an error"})}generateClearButtonLabel(e){return l.formatMessage({id:"file.clearErrorLabel",defaultMessage:"Clear {fileName} error",description:"Label for a button used to clear an error, including filename"},{fileName:e})}componentWillLoad(){const e=this.el.getRootNode().host;if(e&&e.nodeName==="WM-UPLOADER"){if(e.type||e.uploaderType){this.isWithinLegacyUploader=true}}const t=new ResizeObserver((()=>this.debouncedResize()));t.observe(this.el)}componentDidRender(){this.truncateFileName(this.el.shadowRoot.querySelector(".file"))}previewFile(e){this.wmIntFilePreviewed.emit(e.id)}downloadFile(e){this.wmIntFileDownloaded.emit(e.id)}deleteFile(e){this.wmIntFileDeleted.emit(e.id)}truncateFileName(e){const t=e.querySelector(".left-group");const i=t.getBoundingClientRect().left;const o=e.querySelector(".right-group");const s=o?o.getBoundingClientRect().left:e.getBoundingClientRect().right-20;const n=e.querySelector(".filename");const r=s-i;let l=n.dataset.filename;const a=r>l.length*this.singleCharacterWidth;if(!a){const e=l.slice(l.lastIndexOf("."));const t=Math.floor(r/this.singleCharacterWidth);const i=3+3+e.length;let o=Math.max(2,t-i);const s=l.slice(0,o);const n=l.slice(l.indexOf(e)-3,l.length);l=`${s.trim()}...${n.trim()}`}n.textContent=l}handleFilenameMouseEnter(e,t){if(e.target.textContent.includes("...")){a("bottom",e.target,t)}}renderFileName(e,t){return o("div",{class:"left-group"},o("div",{class:"name-wrapper"},o("span",{class:"sr-only"},e),o("span",{"aria-hidden":"true",class:"filename","data-filename":e,onMouseEnter:t=>this.handleFilenameMouseEnter(t,e),onMouseLeave:()=>d()}),t&&o("span",{class:"sr-only"},"uploading"),o("div",{class:"ch-measure"})))}renderFileInfo(e,t){let i="";if(t==="time"&&e.lastUpdated){i=e.lastUpdated}else if(t==="size"&&e.size){i=e.size}return o("div",{class:"file-info"},i)}renderActionMenu(e){const t="download delete";const i=e.fileActions||t;const s=o("wm-menuitem",{icon:"f208",onClick:()=>this.previewFile(e)},this.previewActionMessage);const n=o("wm-menuitem",{icon:"f1da",onClick:()=>this.downloadFile(e)},this.downloadActionMessage);const r=o("wm-menuitem",{icon:"f1c0",onClick:()=>this.deleteFile(e)},this.deleteActionMessage);return o("wm-action-menu",{"action-menu-type":"icon",tooltip:this.actionMenuLabel,"tooltip-position":"bottom","label-for-identical-buttons":`${e.name} ${this.actionMenuLabel}`},i.includes("preview")&&s,i.includes("download")&&n,i.includes("delete")&&r)}renderFileActionButtons(e){const t="download delete";const i=e.fileActions||t;const s=o("wm-button",{class:"preview-button","button-type":"icononly",tooltip:this.previewButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":`preview ${e.name}`,icon:"f208",onClick:()=>this.previewFile(e)});const n=o("wm-button",{class:"download-button","button-type":"icononly",tooltip:this.downloadButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":`download ${e.name}`,icon:"f1da",onClick:()=>this.downloadFile(e)});const r=o("wm-button",{class:"delete-button","button-type":"icononly",tooltip:this.deleteButtonTooltip,"tooltip-position":"bottom","label-for-identical-buttons":`delete ${e.name}`,icon:"f1c0",onClick:()=>this.deleteFile(e)});return o("div",{class:"file-controls"},i.includes("preview")&&s,i.includes("download")&&n,i.includes("delete")&&r)}renderFileInProgress(e){const t=e.type?`${e.name}.${e.type}`:e.name;return o("div",{class:"file-wrapper"},o("div",{class:"file --progress"},o("div",{class:"progress",style:{background:`linear-gradient(to right, rgba(67, 126, 142, 1) ${e.progress}%, transparent ${e.progress}%)`}}),this.renderFileName(t,this.isUploading)))}renderFileControls(e){const t=e.fileActions&&e.fileActions.split(" ").length===1;const i=this.isCondensed&&!t;return i?this.renderActionMenu(e):this.renderFileActionButtons(e)}renderFile(e){const t=e.type?`${e.name}.${e.type}`:e.name;const i=!this.isWithinLegacyUploader&&e.progress===100;return o("div",{class:`file-wrapper ${i?"checked":""}`},o("div",{class:`file ${this.errorMessage?"--error":""}`},this.renderFileName(t,this.isUploading),!this.errorMessage&&o("div",{class:`right-group ${this.isCondensed?"condensed":""}`},this.showInfo!=="none"&&this.renderFileInfo(e,this.showInfo),e.fileActions!==""&&this.renderFileControls(e)),this.errorMessage&&o("wm-button",{"permanently-delete":true,"button-type":"textonly","label-for-identical-buttons":this.generateClearButtonLabel(e.name),onClick:()=>this.wmFileClearErrorClicked.emit({name:e.name})},this.clearButtonText)),this.errorMessage&&o("div",{class:"error-message"},this.errorMessage))}render(){return o(s,{role:"listitem"},this.isUploading?this.renderFileInProgress(this.fileData):this.renderFile(this.fileData))}static get delegatesFocus(){return true}get el(){return n(this)}};c.style=p;export{c as wm_file};
+//# sourceMappingURL=p-54df11c8.entry.js.map

package/dist/ripple/p-54df11c8.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["wmFileCss","File","this","isWithinLegacyUploader","debouncedResize","debounce","isCondensed","el","clientWidth","forceUpdate","fileData","data","file","JSON","parse","progress","match","parseInt","toString","isUploading","hasOwnProperty","singleCharacterWidth","shadowRoot","querySelector","previewButtonTooltip","intl","formatMessage","id","defaultMessage","description","downloadButtonTooltip","deleteButtonTooltip","previewActionMessage","downloadActionMessage","deleteActionMessage","actionMenuLabel","clearButtonText","generateClearButtonLabel","filename","fileName","componentWillLoad","shadowRootHost","getRootNode","host","nodeName","type","uploaderType","resizeObserver","ResizeObserver","observe","componentDidRender","truncateFileName","previewFile","wmIntFilePreviewed","emit","downloadFile","wmIntFileDownloaded","deleteFile","wmIntFileDeleted","leftGroup","leftBoundary","getBoundingClientRect","left","rightGroup","rightBoundary","right","filenameEl","availableSpace","dataset","canFitText","length","extension","slice","lastIndexOf","numFittingCharacters","Math","floor","postEllipsesLength","preEllipsesLength","max","preEllipsesText","postEllipsesText","indexOf","trim","textContent","handleFilenameMouseEnter","ev","target","includes","showTooltip","renderFileName","h","class","onMouseEnter","onMouseLeave","hideTooltip","renderFileInfo","item","showInfo","displayedInfo","lastUpdated","size","renderActionMenu","defaultFileActions","availableActions","fileActions","previewItem","icon","onClick","downloadItem","deleteItem","tooltip","name","renderFileActionButtons","previewButton","downloadButton","deleteButton","renderFileInProgress","style","background","renderFileControls","hasSingleFileAction","split","showActionMenu","renderFile","showCheckmark","errorMessage","wmFileClearErrorClicked","render","Host","role"],"sources":["./src/components/wm-file/wm-file.scss?tag=wm-file&encapsulation=shadow","./src/components/wm-file/wm-file.tsx"],"sourcesContent":[":host,\r\nwm-file {\r\n display: block;\r\n width: 100%;\r\n}\r\n.file-wrapper {\r\n font-size: rem-calc(14);\r\n position: relative;\r\n list-style: none;\r\n\r\n .file {\r\n min-width: 300px;\r\n @include border-radius(3px);\r\n height: rem-calc(56);\r\n padding: 0 rem-calc(20);\r\n position: relative; // for progress bar\r\n background: $background;\r\n border: 1px solid rgb(107, 107, 107);\r\n\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n\r\n .filename {\r\n white-space: nowrap;\r\n }\r\n\r\n .left-group {\r\n overflow: hidden;\r\n }\r\n\r\n .right-group {\r\n display: flex;\r\n align-items: center;\r\n padding-left: rem-calc(80);\r\n gap: rem-calc(16);\r\n\r\n &.condensed {\r\n padding-left: rem-calc(40);\r\n }\r\n\r\n .file-controls {\r\n display: flex;\r\n gap: rem-calc(16);\r\n }\r\n .file-info {\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n &.--error {\r\n border: 1px solid $error-color;\r\n background-color: #f5ebea;\r\n height: rem-calc(60);\r\n }\r\n }\r\n\r\n &.checked {\r\n .file:after {\r\n @include mdi-icon;\r\n content: \"\\f133\";\r\n position: absolute;\r\n right: calc(-16px + -28px);\r\n color: $uploader-checkmark-background;\r\n font-size: 28px;\r\n line-height: 1;\r\n }\r\n }\r\n}\r\n\r\n.name-wrapper {\r\n overflow: hidden;\r\n}\r\n\r\n.progress {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n right: 0;\r\n height: 8px;\r\n}\r\n\r\n.error-message {\r\n color: $error-color;\r\n padding-top: rem-calc(4);\r\n font-style: italic;\r\n}\r\n\r\n.sr-only {\r\n @include srOnly;\r\n}\r\n\r\n.ch-measure {\r\n // used to get the measurement of a single character, for truncation calculations\r\n width: 1ch !important;\r\n visibility: hidden;\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Prop, State, Host, forceUpdate } from \"@stencil/core\";\r\nimport { debounce, hideTooltip, intl, showTooltip } from \"../../global/functions\";\r\nimport { UploadedFile } from \"../../global/interfaces\";\r\n\r\n@Component({\r\n tag: \"wm-file\",\r\n styleUrl: \"wm-file.scss\",\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class File {\r\n @Element() el!: HTMLWmFileElement;\r\n @Prop() file?: string;\r\n @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\r\n @Prop() errorMessage?: string;\r\n @State() isCondensed: boolean = false;\r\n @Event() wmIntFilePreviewed!: EventEmitter<string>;\r\n @Event() wmIntFileDownloaded!: EventEmitter<string>;\r\n @Event() wmIntFileDeleted!: EventEmitter<string>;\r\n @Event() wmFileClearErrorClicked!: EventEmitter; // undocumented event, for communication with wm-uploader\r\n // the file component is used within wm-uploader, which still includes legacy types 1 and 2\r\n // some new features are not included in these legacy types, and must use the below in conditions\r\n private isWithinLegacyUploader: boolean = false;\r\n\r\n get fileData(): UploadedFile {\r\n let data = this.file ? JSON.parse(this.file) : null;\r\n\r\n // sometimes JSON numbers can be received as strings, make sure progress is always a number\r\n if (data && data.progress && typeof data.progress === \"string\" && data.progress.match(/^[0-9]+$/)) {\r\n data.progress = parseInt(data.progress.toString());\r\n }\r\n return data;\r\n }\r\n\r\n get isUploading(): boolean {\r\n return this.fileData && this.fileData.hasOwnProperty(\"progress\") && this.fileData.progress! < 100;\r\n }\r\n\r\n get singleCharacterWidth() {\r\n return this.el.shadowRoot!.querySelector(\".ch-measure\")!.clientWidth;\r\n }\r\n\r\n get previewButtonTooltip() {\r\n return intl.formatMessage({\r\n id: \"file.previewButtonTooltip\",\r\n defaultMessage: \"Preview\",\r\n description: \"Tooltip of a button that triggers a file to be previewed\",\r\n });\r\n }\r\n\r\n get downloadButtonTooltip() {\r\n return intl.formatMessage({\r\n id: \"file.downloadButtonTooltip\",\r\n defaultMessage: \"Download\",\r\n description: \"Tooltip of a button that triggers a file to be downloaded\",\r\n });\r\n }\r\n\r\n get deleteButtonTooltip() {\r\n return intl.formatMessage({\r\n id: \"file.deleteButtonTooltip\",\r\n defaultMessage: \"Delete\",\r\n description: \"Tooltip of a button that triggers a file to be deleted\",\r\n });\r\n }\r\n\r\n get previewActionMessage() {\r\n return intl.formatMessage({\r\n id: \"file.previewAction\",\r\n defaultMessage: \"Preview File\",\r\n description: \"Label of a button that triggers a file to be previewed\",\r\n });\r\n }\r\n\r\n get downloadActionMessage() {\r\n return intl.formatMessage({\r\n id: \"file.downloadAction\",\r\n defaultMessage: \"Download File\",\r\n description: \"Label of a button that triggers a file to be downloaded\",\r\n });\r\n }\r\n\r\n get deleteActionMessage() {\r\n return intl.formatMessage({\r\n id: \"file.deleteAction\",\r\n defaultMessage: \"Delete File\",\r\n description: \"Label of a button that triggers a file to be delete\",\r\n });\r\n }\r\n\r\n get actionMenuLabel() {\r\n return intl.formatMessage({\r\n id: \"file.actionMenuLabel\",\r\n defaultMessage: \"Actions\",\r\n description: \"Label of a button that opens a menu of file actions\",\r\n });\r\n }\r\n\r\n get clearButtonText() {\r\n return intl.formatMessage({\r\n id: \"file.clearErrorText\",\r\n defaultMessage: \"Clear\",\r\n description: \"Text for a button used to clear an error\",\r\n });\r\n }\r\n\r\n generateClearButtonLabel(filename: string) {\r\n return intl.formatMessage(\r\n {\r\n id: \"file.clearErrorLabel\",\r\n defaultMessage: \"Clear {fileName} error\",\r\n description: \"Label for a button used to clear an error, including filename\",\r\n },\r\n { fileName: filename }\r\n );\r\n }\r\n\r\n componentWillLoad() {\r\n const shadowRootHost = (this.el.getRootNode() as ShadowRoot).host;\r\n\r\n if (shadowRootHost && shadowRootHost.nodeName === \"WM-UPLOADER\") {\r\n if ((shadowRootHost as HTMLWmUploaderElement).type || (shadowRootHost as HTMLWmUploaderElement).uploaderType) {\r\n this.isWithinLegacyUploader = true;\r\n }\r\n }\r\n\r\n // rerender on resize in case layout needs to change\r\n const resizeObserver = new ResizeObserver(() => this.debouncedResize());\r\n resizeObserver.observe(this.el);\r\n }\r\n\r\n componentDidRender() {\r\n this.truncateFileName(this.el.shadowRoot!.querySelector(\".file\")!);\r\n }\r\n\r\n debouncedResize = debounce(() => {\r\n this.isCondensed = this.el.clientWidth < 500;\r\n // rerender to show filename truncation changes\r\n forceUpdate(this.el);\r\n }, 50);\r\n\r\n previewFile(file: UploadedFile) {\r\n this.wmIntFilePreviewed.emit(file.id);\r\n }\r\n\r\n downloadFile(file: UploadedFile) {\r\n this.wmIntFileDownloaded.emit(file.id);\r\n }\r\n\r\n deleteFile(file: UploadedFile) {\r\n this.wmIntFileDeleted.emit(file.id);\r\n }\r\n\r\n truncateFileName(file: Element) {\r\n const leftGroup = file.querySelector(\".left-group\");\r\n const leftBoundary = leftGroup!.getBoundingClientRect().left;\r\n const rightGroup = file.querySelector(\".right-group\");\r\n const rightBoundary = rightGroup\r\n ? rightGroup.getBoundingClientRect().left\r\n : file.getBoundingClientRect().right - 20;\r\n const filenameEl = file.querySelector(\".filename\") as HTMLElement;\r\n const availableSpace = rightBoundary - leftBoundary;\r\n\r\n let filename = filenameEl.dataset.filename!;\r\n const canFitText = availableSpace > filename.length * this.singleCharacterWidth;\r\n\r\n if (!canFitText) {\r\n const extension = filename.slice(filename.lastIndexOf(\".\"));\r\n const numFittingCharacters = Math.floor(availableSpace / this.singleCharacterWidth);\r\n\r\n // three ellipses, three constant characters, extension\r\n const postEllipsesLength = 3 + 3 + extension.length;\r\n let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);\r\n const preEllipsesText = filename.slice(0, preEllipsesLength);\r\n const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);\r\n filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;\r\n }\r\n\r\n filenameEl.textContent = filename;\r\n }\r\n\r\n handleFilenameMouseEnter(ev: MouseEvent, filename: string) {\r\n // only show tooltip if file name is being truncated (has ellipses)\r\n if ((ev.target as HTMLElement).textContent!.includes(\"...\")) {\r\n showTooltip(\"bottom\", ev.target as HTMLElement, filename);\r\n }\r\n }\r\n\r\n renderFileName(filename: string, isUploading: boolean) {\r\n return (\r\n <div class=\"left-group\">\r\n <div class=\"name-wrapper\">\r\n <span class=\"sr-only\">{filename}</span>\r\n <span\r\n aria-hidden=\"true\"\r\n class=\"filename\"\r\n data-filename={filename}\r\n onMouseEnter={(ev) => this.handleFilenameMouseEnter(ev, filename)}\r\n onMouseLeave={() => hideTooltip()}\r\n ></span>\r\n {isUploading && <span class=\"sr-only\">uploading</span>}\r\n <div class=\"ch-measure\"></div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n renderFileInfo(item: UploadedFile, showInfo: string) {\r\n let displayedInfo = \"\";\r\n if (showInfo === \"time\" && item.lastUpdated) {\r\n displayedInfo = item.lastUpdated;\r\n } else if (showInfo === \"size\" && item.size) {\r\n displayedInfo = item.size;\r\n }\r\n\r\n return <div class=\"file-info\">{displayedInfo}</div>;\r\n }\r\n\r\n renderActionMenu(item: UploadedFile) {\r\n const defaultFileActions = \"download delete\";\r\n const availableActions = item.fileActions || defaultFileActions;\r\n const previewItem = (\r\n <wm-menuitem icon=\"f208\" onClick={() => this.previewFile(item)}>\r\n {this.previewActionMessage}\r\n </wm-menuitem>\r\n );\r\n const downloadItem = (\r\n <wm-menuitem icon=\"f1da\" onClick={() => this.downloadFile(item)}>\r\n {this.downloadActionMessage}\r\n </wm-menuitem>\r\n );\r\n const deleteItem = (\r\n <wm-menuitem icon=\"f1c0\" onClick={() => this.deleteFile(item)}>\r\n {this.deleteActionMessage}\r\n </wm-menuitem>\r\n );\r\n return (\r\n <wm-action-menu\r\n action-menu-type=\"icon\"\r\n tooltip={this.actionMenuLabel}\r\n tooltip-position=\"bottom\"\r\n label-for-identical-buttons={`${item.name} ${this.actionMenuLabel}`}\r\n >\r\n {availableActions.includes(\"preview\") && previewItem}\r\n {availableActions.includes(\"download\") && downloadItem}\r\n {availableActions.includes(\"delete\") && deleteItem}\r\n </wm-action-menu>\r\n );\r\n }\r\n\r\n renderFileActionButtons(item: UploadedFile) {\r\n const defaultFileActions = \"download delete\";\r\n const availableActions = item.fileActions || defaultFileActions;\r\n\r\n const previewButton = (\r\n <wm-button\r\n class=\"preview-button\"\r\n button-type=\"icononly\"\r\n tooltip={this.previewButtonTooltip}\r\n tooltip-position=\"bottom\"\r\n label-for-identical-buttons={`preview ${item.name}`}\r\n icon=\"f208\"\r\n onClick={() => this.previewFile(item)}\r\n ></wm-button>\r\n );\r\n const downloadButton = (\r\n <wm-button\r\n class=\"download-button\"\r\n button-type=\"icononly\"\r\n tooltip={this.downloadButtonTooltip}\r\n tooltip-position=\"bottom\"\r\n label-for-identical-buttons={`download ${item.name}`}\r\n icon=\"f1da\"\r\n onClick={() => this.downloadFile(item)}\r\n ></wm-button>\r\n );\r\n const deleteButton = (\r\n <wm-button\r\n class=\"delete-button\"\r\n button-type=\"icononly\"\r\n tooltip={this.deleteButtonTooltip}\r\n tooltip-position=\"bottom\"\r\n label-for-identical-buttons={`delete ${item.name}`}\r\n icon=\"f1c0\"\r\n onClick={() => this.deleteFile(item)}\r\n ></wm-button>\r\n );\r\n\r\n return (\r\n <div class=\"file-controls\">\r\n {availableActions.includes(\"preview\") && previewButton}\r\n {availableActions.includes(\"download\") && downloadButton}\r\n {availableActions.includes(\"delete\") && deleteButton}\r\n </div>\r\n );\r\n }\r\n\r\n renderFileInProgress(item: UploadedFile) {\r\n const filename = item.type ? `${item.name}.${item.type}` : item.name;\r\n return (\r\n <div class=\"file-wrapper\">\r\n <div class=\"file --progress\">\r\n <div\r\n class=\"progress\"\r\n style={{\r\n background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,\r\n }}\r\n ></div>\r\n {this.renderFileName(filename, this.isUploading)}\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n renderFileControls(item: UploadedFile) {\r\n const hasSingleFileAction = item.fileActions && item.fileActions.split(\" \").length === 1;\r\n const showActionMenu = this.isCondensed && !hasSingleFileAction;\r\n\r\n return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);\r\n }\r\n\r\n renderFile(item: UploadedFile) {\r\n const filename = item.type ? `${item.name}.${item.type}` : item.name;\r\n const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;\r\n\r\n return (\r\n <div class={`file-wrapper ${showCheckmark ? \"checked\" : \"\"}`}>\r\n <div class={`file ${this.errorMessage ? \"--error\" : \"\"}`}>\r\n {this.renderFileName(filename, this.isUploading)}\r\n {!this.errorMessage && (\r\n <div class={`right-group ${this.isCondensed ? \"condensed\" : \"\"}`}>\r\n {this.showInfo !== \"none\" && this.renderFileInfo(item, this.showInfo)}\r\n {item.fileActions !== \"\" && this.renderFileControls(item)}\r\n </div>\r\n )}\r\n {this.errorMessage && (\r\n <wm-button\r\n permanently-delete\r\n button-type=\"textonly\"\r\n label-for-identical-buttons={this.generateClearButtonLabel(item.name)}\r\n onClick={() => this.wmFileClearErrorClicked.emit({ name: item.name })}\r\n >\r\n {this.clearButtonText}\r\n </wm-button>\r\n )}\r\n </div>\r\n {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\r\n </div>\r\n );\r\n }\r\n\r\n render() {\r\n return (\r\n <Host role=\"listitem\">\r\n {this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-59654f8e.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Wrapper","componentDidLoad","this","wmWrapperLoaded","emit","render"],"sources":["./src/components/wm-wrapper/wm-wrapper.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n tag: \"wm-wrapper\",\n shadow: false,\n})\nexport class Wrapper {\n @Element() el!: any;\n @Event() wmWrapperLoaded!: EventEmitter<void>;\n\n componentDidLoad() {\n this.wmWrapperLoaded.emit();\n }\n\n render() {\n return;\n }\n}\n"],"mappings":"mDAMaA,EAAO,M,0EAIlBC,mBACEC,KAAKC,gBAAgBC,M,CAGvBC,SACE,M"}
1	+ {"version":3,"names":["Wrapper","componentDidLoad","this","wmWrapperLoaded","emit","render"],"sources":["./src/components/wm-wrapper/wm-wrapper.tsx"],"sourcesContent":["import { Component, Element, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"wm-wrapper\",\r\n shadow: false,\r\n})\r\nexport class Wrapper {\r\n @Element() el!: any;\r\n @Event() wmWrapperLoaded!: EventEmitter<void>;\r\n\r\n componentDidLoad() {\r\n this.wmWrapperLoaded.emit();\r\n }\r\n\r\n render() {\r\n return;\r\n }\r\n}\r\n"],"mappings":"mDAMaA,EAAO,M,0EAIlBC,mBACEC,KAAKC,gBAAgBC,M,CAGvBC,SACE,M"}

package/dist/ripple/{p-535e33d7.entry.js → p-5bf24119.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,H as e,g as r}from"./p-1c23de4a.js";import{a}from"./p-888bec42.js";import{k as o,l as n,i as h}from"./p-9fd3badc.js";import{g as l}from"./p-a6d6eae7.js";const p=":host,wm-navigator{min-width:0;position:relative;display:inline-block}:host .wrapper,wm-navigator .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:#fff;letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user,wm-navigator .wrapper .user{background:#f4f4f4;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p,wm-navigator .wrapper .user p{margin:0}:host .wrapper .user p:first-child,wm-navigator .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2,wm-navigator .wrapper h2{background:#2e1b46;color:#fff;font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox],wm-navigator .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide,wm-navigator .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right,wm-navigator .wrapper.right{right:auto;left:20px}:host img,wm-navigator img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout,wm-navigator .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";const c=class{constructor(i){t(this,i);this.wmNavigatorLogout=s(this,"wmNavigatorLogout",7);this.retrievedInfo=!this.loadFromUserinfo;this.parsedProducts=[];this.openRight=false;this.userName=undefined;this.email=undefined;this.authType=1;this.connectionName=undefined;this.logoutUrl=undefined;this.products=undefined;this.loadFromUserinfo=false;this.isOpen=false;this.isTabbing=false;this.itemIndexToFocus=0}async componentWillLoad(){if(!this.userName){console.error("wm-navigator: user-name is a required property.")}await this.parseData();this.setFocusIndex()}async parseData(){if(!!this.loadFromUserinfo){await l("/platform/navigator/userinfo").then((t=>{this.email=t.email;this.currentProductId=t.current_product_id;this.parsedProducts=this.productKeysToCamelCase(t.products);this.logoutUrl=this.logoutUrl?this.logoutUrl:t.logout_url;this.connectionName=this.connectionName?this.connectionName:t.connection_name;if(!!this.email&&!!this.currentProductId){this.retrievedInfo=true}})).catch((t=>{console.error(t)}))}else{this.currentProductId=a(this.el);if(!!this.products){if(typeof this.products==="string"){this.parsedProducts=JSON.parse(this.products)}else{this.parsedProducts=this.products}this.parsedProducts=this.productKeysToCamelCase(this.parsedProducts)}}this.parsedProducts.sort(((t,s)=>t.name<s.name?-1:1))}productKeysToCamelCase(t){t=t.map((t=>{const s=Object.keys(t);let i={};s.forEach((s=>{i[o(s)]=t[s]}));return i}));return t}setFocusIndex(){if(this.parsedProducts.length>1){const t=this.getProduct(this.currentProductId);if(t){this.itemIndexToFocus=this.parsedProducts.indexOf(t)}}}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleKeys(t){switch(t.key){case"Escape":t.preventDefault();this.closeMenu();break;case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen){this.itemIndexToFocus=n(this.itemIndexToFocus,t.key,this.navigatorItems.length);this.openMenu()}break}}handleKeydown(t){const s=t.detail.key;const i=t.detail.navItem;switch(s){case"Tab":this.closeMenu();break;case"Enter":case" ":i.click();break;case"ArrowDown":case"ArrowUp":const t=this.itemIndexToFocus;this.itemIndexToFocus=n(this.itemIndexToFocus,s,this.navigatorItems.length);this.focusItem();this.unfocusItem(t);break}}handleClick(t){const s=t.target===this.el||this.el.contains(t.target);if(!s&&this.isOpen){this.closeMenu()}}handleButtonClick(){this.isOpen?this.closeMenu():this.openMenu()}openMenu(){if(this.wrapperEl){const t=this.wrapperEl.clientWidth;const s=this.el.getBoundingClientRect().left;const i=document.documentElement.clientWidth-this.el.getBoundingClientRect().right;this.openRight=t>s&&i>s}this.isOpen=true;this.focusItem()}closeMenu(){this.isOpen=false;this.buttonFocusHandler();this.unfocusItem(this.itemIndexToFocus);this.setFocusIndex()}focusItem(){const t=this.navigatorItems[this.itemIndexToFocus];t.tabIndex=0;t.focused=true;window.requestAnimationFrame((()=>t.focus()))}unfocusItem(t){const s=this.navigatorItems[t];s.tabIndex=-1;s.focused=false}buttonFocusHandler(){const t=this.el.shadowRoot.querySelector("priv-navigator-button");const s=t.shadowRoot.querySelector("button");window.requestAnimationFrame((()=>s.focus()))}renderUserInfo(){return i("div",{class:"user",id:"wm-nav-user","aria-label":h.formatMessage({id:"navigator.userinfoLabel",defaultMessage:"for {name}, email {email}"},{name:this.userName,email:this.email})},i("p",null,this.userName),i("p",null,this.email))}setAltText(){if(this.parsedProducts.length>1){return h.formatMessage({id:"navigator.userinfoAndProductNavigator",defaultMessage:"User information and product navigator"})}else{return h.formatMessage({id:"navigator.userinfo",defaultMessage:"User information"})}}renderHeading(){return i("h2",null,h.formatMessage({id:"navigator.watermarkApps",defaultMessage:"Watermark Apps",description:"Applications made by Watermark Insights"}))}renderList(){return i("ul",{role:"listbox","aria-label":`${h.formatMessage({id:"navigator.WatermarkAppNavigation",defaultMessage:"Watermark App Navigation",description:"list of applications by Watermark Insights"})}`,"aria-describedby":"wm-nav-user"},this.parsedProducts.length>1&&this.renderProductOptions(),this.renderLogoutOption())}renderProductOptions(){return this.parsedProducts.map((t=>{let s,e,r,a;s=t.name;e=t.iconUrl;a=this.setProductOnClick(t.id);if(!!s&&!!e){r=this.currentProductId===t.id;return i("priv-navigator-item",{selected:r,id:t.id,onClick:a,role:"option","aria-label":s},i("img",{src:e,alt:s}))}}))}setProductOnClick(t){const s=this.getProduct(t);if(this.currentProductId===t){return()=>{}}else if(s){if(!!this.loadFromUserinfo||this.authType===2){return()=>window.location.href=s.linkUrl}else if(this.authType===3){const t=this.connectionName?`/?connection_name=${this.connectionName}`:"";return()=>window.location.href=s.samlLinkUrl+t}}}renderLogoutOption(){return i("priv-navigator-item",{class:"logout",selected:!(this.parsedProducts.length>1),id:"nav-logout",onClick:this.setLogoutOnclick(),role:"option"},i("span",{class:"logout"},h.formatMessage({id:"navigator.logout",defaultMessage:"Log Out"})))}setLogoutOnclick(){return()=>{this.wmNavigatorLogout.emit();if(this.logoutUrl){window.location.href=this.logoutUrl}}}get navigatorItems(){return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"))}getProduct(t){return this.parsedProducts.find((s=>s.id===t))}render(){return this.retrievedInfo?i(e,{class:this.isTabbing?"user-is-tabbing":""},i("priv-navigator-button",{expanded:this.isOpen,altText:this.setAltText(),isTabbing:this.isTabbing}),i("div",{class:`wrapper ${this.isOpen?"":"hide"} ${this.openRight?"right":""}`,ref:t=>this.wrapperEl=t},this.renderUserInfo(),this.parsedProducts.length>1&&this.renderHeading(),this.renderList())):""}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{products:["parseData"]}}};c.style=p;export{c as wm_navigator};
-//# sourceMappingURL=p-535e33d7.entry.js.map
+import{r as t,c as s,h as i,H as e,g as r}from"./p-1c23de4a.js";import{a}from"./p-43f1298b.js";import{k as o,l as n,i as h}from"./p-edfba0e1.js";import{g as l}from"./p-fd8070fb.js";const p=":host,wm-navigator{min-width:0;position:relative;display:inline-block}:host .wrapper,wm-navigator .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:#fff;letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user,wm-navigator .wrapper .user{background:#f4f4f4;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p,wm-navigator .wrapper .user p{margin:0}:host .wrapper .user p:first-child,wm-navigator .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2,wm-navigator .wrapper h2{background:#2e1b46;color:#fff;font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox],wm-navigator .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide,wm-navigator .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right,wm-navigator .wrapper.right{right:auto;left:20px}:host img,wm-navigator img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout,wm-navigator .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";const f=class{constructor(i){t(this,i);this.wmNavigatorLogout=s(this,"wmNavigatorLogout",7);this.retrievedInfo=!this.loadFromUserinfo;this.parsedProducts=[];this.openRight=false;this.userName=undefined;this.email=undefined;this.authType=1;this.connectionName=undefined;this.logoutUrl=undefined;this.products=undefined;this.loadFromUserinfo=false;this.isOpen=false;this.isTabbing=false;this.itemIndexToFocus=0}async componentWillLoad(){if(!this.userName){console.error("wm-navigator: user-name is a required property.")}await this.parseData();this.setFocusIndex()}async parseData(){if(!!this.loadFromUserinfo){await l("/platform/navigator/userinfo").then((t=>{this.email=t.email;this.currentProductId=t.current_product_id;this.parsedProducts=this.productKeysToCamelCase(t.products);this.logoutUrl=this.logoutUrl?this.logoutUrl:t.logout_url;this.connectionName=this.connectionName?this.connectionName:t.connection_name;if(!!this.email&&!!this.currentProductId){this.retrievedInfo=true}})).catch((t=>{console.error(t)}))}else{this.currentProductId=a(this.el);if(!!this.products){if(typeof this.products==="string"){this.parsedProducts=JSON.parse(this.products)}else{this.parsedProducts=this.products}this.parsedProducts=this.productKeysToCamelCase(this.parsedProducts)}}this.parsedProducts.sort(((t,s)=>t.name<s.name?-1:1))}productKeysToCamelCase(t){t=t.map((t=>{const s=Object.keys(t);let i={};s.forEach((s=>{i[o(s)]=t[s]}));return i}));return t}setFocusIndex(){if(this.parsedProducts.length>1){const t=this.getProduct(this.currentProductId);if(t){this.itemIndexToFocus=this.parsedProducts.indexOf(t)}}}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleKeys(t){switch(t.key){case"Escape":t.preventDefault();this.closeMenu();break;case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen){this.itemIndexToFocus=n(this.itemIndexToFocus,t.key,this.navigatorItems.length);this.openMenu()}break}}handleKeydown(t){const s=t.detail.key;const i=t.detail.navItem;switch(s){case"Tab":this.closeMenu();break;case"Enter":case" ":i.click();break;case"ArrowDown":case"ArrowUp":const t=this.itemIndexToFocus;this.itemIndexToFocus=n(this.itemIndexToFocus,s,this.navigatorItems.length);this.focusItem();this.unfocusItem(t);break}}handleClick(t){const s=t.target===this.el||this.el.contains(t.target);if(!s&&this.isOpen){this.closeMenu()}}handleButtonClick(){this.isOpen?this.closeMenu():this.openMenu()}openMenu(){if(this.wrapperEl){const t=this.wrapperEl.clientWidth;const s=this.el.getBoundingClientRect().left;const i=document.documentElement.clientWidth-this.el.getBoundingClientRect().right;this.openRight=t>s&&i>s}this.isOpen=true;this.focusItem()}closeMenu(){this.isOpen=false;this.buttonFocusHandler();this.unfocusItem(this.itemIndexToFocus);this.setFocusIndex()}focusItem(){const t=this.navigatorItems[this.itemIndexToFocus];t.tabIndex=0;t.focused=true;window.requestAnimationFrame((()=>t.focus()))}unfocusItem(t){const s=this.navigatorItems[t];s.tabIndex=-1;s.focused=false}buttonFocusHandler(){const t=this.el.shadowRoot.querySelector("priv-navigator-button");const s=t.shadowRoot.querySelector("button");window.requestAnimationFrame((()=>s.focus()))}renderUserInfo(){return i("div",{class:"user",id:"wm-nav-user","aria-label":h.formatMessage({id:"navigator.userinfoLabel",defaultMessage:"for {name}, email {email}"},{name:this.userName,email:this.email})},i("p",null,this.userName),i("p",null,this.email))}setAltText(){if(this.parsedProducts.length>1){return h.formatMessage({id:"navigator.userinfoAndProductNavigator",defaultMessage:"User information and product navigator"})}else{return h.formatMessage({id:"navigator.userinfo",defaultMessage:"User information"})}}renderHeading(){return i("h2",null,h.formatMessage({id:"navigator.watermarkApps",defaultMessage:"Watermark Apps",description:"Applications made by Watermark Insights"}))}renderList(){return i("ul",{role:"listbox","aria-label":`${h.formatMessage({id:"navigator.WatermarkAppNavigation",defaultMessage:"Watermark App Navigation",description:"list of applications by Watermark Insights"})}`,"aria-describedby":"wm-nav-user"},this.parsedProducts.length>1&&this.renderProductOptions(),this.renderLogoutOption())}renderProductOptions(){return this.parsedProducts.map((t=>{let s,e,r,a;s=t.name;e=t.iconUrl;a=this.setProductOnClick(t.id);if(!!s&&!!e){r=this.currentProductId===t.id;return i("priv-navigator-item",{selected:r,id:t.id,onClick:a,role:"option","aria-label":s},i("img",{src:e,alt:s}))}}))}setProductOnClick(t){const s=this.getProduct(t);if(this.currentProductId===t){return()=>{}}else if(s){if(!!this.loadFromUserinfo||this.authType===2){return()=>window.location.href=s.linkUrl}else if(this.authType===3){const t=this.connectionName?`/?connection_name=${this.connectionName}`:"";return()=>window.location.href=s.samlLinkUrl+t}}}renderLogoutOption(){return i("priv-navigator-item",{class:"logout",selected:!(this.parsedProducts.length>1),id:"nav-logout",onClick:this.setLogoutOnclick(),role:"option"},i("span",{class:"logout"},h.formatMessage({id:"navigator.logout",defaultMessage:"Log Out"})))}setLogoutOnclick(){return()=>{this.wmNavigatorLogout.emit();if(this.logoutUrl){window.location.href=this.logoutUrl}}}get navigatorItems(){return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"))}getProduct(t){return this.parsedProducts.find((s=>s.id===t))}render(){return this.retrievedInfo?i(e,{class:this.isTabbing?"user-is-tabbing":""},i("priv-navigator-button",{expanded:this.isOpen,altText:this.setAltText(),isTabbing:this.isTabbing}),i("div",{class:`wrapper ${this.isOpen?"":"hide"} ${this.openRight?"right":""}`,ref:t=>this.wrapperEl=t},this.renderUserInfo(),this.parsedProducts.length>1&&this.renderHeading(),this.renderList())):""}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{products:["parseData"]}}};f.style=p;export{f as wm_navigator};
+//# sourceMappingURL=p-5bf24119.entry.js.map

package/dist/ripple/p-5bf24119.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["wmNavigatorCss","Navigator","this","retrievedInfo","loadFromUserinfo","parsedProducts","openRight","async","userName","console","error","parseData","setFocusIndex","getRequest","then","response","email","currentProductId","current_product_id","productKeysToCamelCase","products","logoutUrl","logout_url","connectionName","connection_name","catch","errStatus","getWmMode","el","JSON","parse","sort","a","b","name","map","product","keys","Object","newProduct","forEach","key","snakeCaseToCamelCase","length","currentProduct","getProduct","itemIndexToFocus","indexOf","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeys","ev","preventDefault","closeMenu","isOpen","getNewIndexToFocus","navigatorItems","openMenu","handleKeydown","detail","item","navItem","click","oldIndex","focusItem","unfocusItem","handleClick","isElOrChild","target","contains","handleButtonClick","wrapperEl","wrapperWidth","clientWidth","spaceLeft","getBoundingClientRect","left","spaceRight","document","documentElement","right","buttonFocusHandler","newSelection","tabIndex","focused","window","requestAnimationFrame","focus","index","oldSelection","hostButton","shadowRoot","querySelector","button","renderUserInfo","h","class","id","intl","formatMessage","defaultMessage","setAltText","renderHeading","description","renderList","role","renderProductOptions","renderLogoutOption","icon","isSelected","clickRedirect","iconUrl","setProductOnClick","selected","onClick","src","alt","productId","authType","location","href","linkUrl","connName","samlLinkUrl","setLogoutOnclick","wmNavigatorLogout","emit","Array","from","querySelectorAll","find","render","Host","expanded","altText","ref"],"sources":["./src/components/wm-navigator/wm-navigator.scss?tag=wm-navigator&encapsulation=shadow","./src/components/wm-navigator/wm-navigator.tsx"],"sourcesContent":[":host,\r\nwm-navigator {\r\n min-width: 0;\r\n position: relative;\r\n display: inline-block;\r\n\r\n .wrapper {\r\n overflow: auto;\r\n font-size: rem-calc(18);\r\n min-width: rem-calc(210);\r\n width: auto;\r\n max-height: 80vh;\r\n text-align: left;\r\n position: absolute;\r\n z-index: 50;\r\n top: 100%;\r\n right: 20px;\r\n left: auto;\r\n background: #fff;\r\n letter-spacing: normal;\r\n @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\r\n @include transition(transform 0.25s ease);\r\n @include transformOrigin(center top);\r\n @include scale($xVal: 1, $yVal: 1);\r\n\r\n .user {\r\n background: $background;\r\n padding: rem-calc(10 20);\r\n font-size: rem-calc(14);\r\n\r\n p {\r\n margin: 0;\r\n }\r\n p:first-child {\r\n font-weight: 700;\r\n text-transform: capitalize;\r\n }\r\n }\r\n\r\n h2 {\r\n background: #2e1b46;\r\n color: #fff;\r\n font-weight: 700;\r\n margin: 0;\r\n padding: rem-calc(10 20);\r\n font-size: rem-calc(14);\r\n }\r\n\r\n [role=\"listbox\"] {\r\n list-style: none;\r\n margin: 0;\r\n padding-left: 0;\r\n }\r\n\r\n &.hide {\r\n @include scale($xVal: 1, $yVal: 0);\r\n }\r\n\r\n &.right {\r\n right: auto;\r\n left: 20px;\r\n }\r\n }\r\n\r\n img {\r\n transform: scale(0.8);\r\n transform-origin: left center;\r\n display: block;\r\n }\r\n\r\n .logout {\r\n text-align: center;\r\n text-transform: capitalize;\r\n }\r\n}\r\n\r\npriv-navigator-item:focus {\r\n outline: none;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, EventEmitter, Event, Watch } from \"@stencil/core\";\r\nimport { getWmMode, Product, NavigatorPayload } from \"../../global/interfaces\";\r\nimport { intl, snakeCaseToCamelCase, getNewIndexToFocus } from \"../../global/functions\";\r\nimport { getRequest } from \"../../global/services/http-service\";\r\n\r\n@Component({\r\n tag: \"wm-navigator\",\r\n styleUrl: \"wm-navigator.scss\",\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class Navigator {\r\n @Element() el!: any;\r\n private wrapperEl?: HTMLDivElement;\r\n\r\n // Component can receive user info and products as props (this is how it worked before)\r\n @Prop() userName?: string;\r\n @Prop() email?: string;\r\n @Prop() authType: number = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso\r\n @Prop() connectionName?: string;\r\n @Prop() logoutUrl?: string;\r\n @Prop() products?: string | []; // products as JSON string, parsed on load\r\n\r\n // The new way is to retrieve user info from an endpoint\r\n // dev needs to opt-in by setting loadFromUserinfo to true\r\n @Prop() loadFromUserinfo: boolean = false;\r\n // comp can check whether the info was successfully retrieved with:\r\n private retrievedInfo: boolean = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed\r\n\r\n // used either way to store the products\r\n parsedProducts: Array<Product> = [];\r\n\r\n /**\r\n * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.\r\n */\r\n @State() isOpen: boolean = false;\r\n private openRight: boolean = false; // whether the menu should open on the right side\r\n\r\n @State() isTabbing: boolean = false;\r\n\r\n /**\r\n * Value is set to the index of the current product on load.\r\n * Keyboard navigation updates the state to keep track of focus in the dropdown.\r\n * State resets to the index of the current product when the dropdown closes.\r\n */\r\n @State() itemIndexToFocus: number = 0;\r\n\r\n @Event() wmNavigatorLogout!: EventEmitter;\r\n\r\n private currentProductId!: string;\r\n\r\n async componentWillLoad() {\r\n if (!this.userName) {\r\n console.error(\"wm-navigator: user-name is a required property.\");\r\n }\r\n\r\n await this.parseData();\r\n this.setFocusIndex();\r\n }\r\n\r\n // async because we need the http request to complete before proceeding\r\n @Watch(\"products\")\r\n async parseData() {\r\n if (!!this.loadFromUserinfo) {\r\n await getRequest(\"/platform/navigator/userinfo\")\r\n .then((response: NavigatorPayload) => {\r\n this.email = response.email;\r\n this.currentProductId = response.current_product_id;\r\n this.parsedProducts = this.productKeysToCamelCase(response.products);\r\n this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;\r\n this.connectionName = this.connectionName ? this.connectionName : response.connection_name;\r\n if (!!this.email && !!this.currentProductId) {\r\n this.retrievedInfo = true;\r\n }\r\n })\r\n .catch((errStatus) => {\r\n console.error(errStatus);\r\n });\r\n } else {\r\n this.currentProductId = getWmMode(this.el);\r\n if (!!this.products) {\r\n if (typeof this.products === \"string\") {\r\n this.parsedProducts = JSON.parse(this.products);\r\n } else {\r\n this.parsedProducts = this.products;\r\n }\r\n this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);\r\n }\r\n }\r\n // products is initialized as empty array in case nothing is passed\r\n this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));\r\n }\r\n\r\n productKeysToCamelCase(products: object[]): Product[] {\r\n products = products.map((product: any) => {\r\n const keys = Object.keys(product);\r\n let newProduct: { [key: string]: string } = {};\r\n keys.forEach((key) => {\r\n newProduct[snakeCaseToCamelCase(key)] = product[key];\r\n });\r\n return newProduct;\r\n });\r\n return products as Product[];\r\n }\r\n\r\n /**\r\n * Sets index to focus on open to the selected product. This index resets it when the menu closes.\r\n */\r\n setFocusIndex() {\r\n if (this.parsedProducts.length > 1) {\r\n const currentProduct = this.getProduct(this.currentProductId);\r\n\r\n if (currentProduct) {\r\n this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);\r\n }\r\n }\r\n }\r\n\r\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n toggleTabbingOn() {\r\n this.isTabbing = true;\r\n }\r\n\r\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n toggleTabbingOff() {\r\n this.isTabbing = false;\r\n }\r\n\r\n @Listen(\"keydown\")\r\n handleKeys(ev: KeyboardEvent) {\r\n switch (ev.key) {\r\n case \"Escape\":\r\n ev.preventDefault();\r\n this.closeMenu();\r\n break;\r\n case \"ArrowDown\":\r\n case \"ArrowUp\":\r\n ev.preventDefault();\r\n if (!this.isOpen) {\r\n this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);\r\n this.openMenu();\r\n }\r\n break;\r\n }\r\n }\r\n\r\n @Listen(\"keydownOnNavItem\")\r\n handleKeydown(ev: CustomEvent) {\r\n const key = ev.detail.key;\r\n const item = ev.detail.navItem;\r\n switch (key) {\r\n case \"Tab\":\r\n this.closeMenu();\r\n break;\r\n case \"Enter\":\r\n case \" \":\r\n item.click();\r\n break;\r\n case \"ArrowDown\":\r\n case \"ArrowUp\":\r\n const oldIndex = this.itemIndexToFocus;\r\n this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);\r\n this.focusItem();\r\n this.unfocusItem(oldIndex);\r\n break;\r\n }\r\n }\r\n\r\n @Listen(\"click\", { target: \"document\" })\r\n handleClick(ev: MouseEvent) {\r\n const isElOrChild = ev.target === this.el || this.el.contains(ev.target as Node);\r\n\r\n if (!isElOrChild && this.isOpen) {\r\n this.closeMenu();\r\n }\r\n }\r\n\r\n @Listen(\"buttonActivated\")\r\n handleButtonClick() {\r\n this.isOpen ? this.closeMenu() : this.openMenu();\r\n }\r\n\r\n openMenu() {\r\n if (this.wrapperEl) {\r\n const wrapperWidth = this.wrapperEl.clientWidth;\r\n const spaceLeft = this.el.getBoundingClientRect().left;\r\n const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;\r\n this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;\r\n }\r\n this.isOpen = true;\r\n this.focusItem();\r\n }\r\n\r\n closeMenu() {\r\n this.isOpen = false;\r\n this.buttonFocusHandler();\r\n this.unfocusItem(this.itemIndexToFocus);\r\n this.setFocusIndex();\r\n }\r\n\r\n focusItem() {\r\n const newSelection = this.navigatorItems[this.itemIndexToFocus];\r\n newSelection.tabIndex = 0;\r\n newSelection.focused = true;\r\n window.requestAnimationFrame(() => newSelection.focus());\r\n }\r\n\r\n unfocusItem(index: number) {\r\n const oldSelection = this.navigatorItems[index];\r\n oldSelection.tabIndex = -1;\r\n oldSelection.focused = false;\r\n }\r\n\r\n buttonFocusHandler() {\r\n const hostButton = this.el.shadowRoot.querySelector(\"priv-navigator-button\");\r\n const button = hostButton.shadowRoot.querySelector(\"button\");\r\n window.requestAnimationFrame(() => button.focus());\r\n }\r\n\r\n /**\r\n * HELPERS FOR RENDER\r\n */\r\n renderUserInfo() {\r\n return (\r\n <div\r\n class=\"user\"\r\n id=\"wm-nav-user\"\r\n aria-label={intl.formatMessage(\r\n {\r\n id: \"navigator.userinfoLabel\",\r\n defaultMessage: \"for {name}, email {email}\",\r\n },\r\n { name: this.userName, email: this.email }\r\n )}\r\n >\r\n <p>{this.userName}</p>\r\n <p>{this.email}</p>\r\n </div>\r\n );\r\n }\r\n\r\n setAltText(): string {\r\n if (this.parsedProducts.length > 1) {\r\n return intl.formatMessage({\r\n id: \"navigator.userinfoAndProductNavigator\",\r\n defaultMessage: \"User information and product navigator\",\r\n });\r\n } else {\r\n return intl.formatMessage({\r\n id: \"navigator.userinfo\",\r\n defaultMessage: \"User information\",\r\n });\r\n }\r\n }\r\n\r\n renderHeading() {\r\n return (\r\n <h2>\r\n {intl.formatMessage({\r\n id: \"navigator.watermarkApps\",\r\n defaultMessage: \"Watermark Apps\",\r\n description: \"Applications made by Watermark Insights\",\r\n })}\r\n </h2>\r\n );\r\n }\r\n\r\n renderList() {\r\n return (\r\n <ul\r\n role=\"listbox\"\r\n aria-label={`${intl.formatMessage({\r\n id: \"navigator.WatermarkAppNavigation\",\r\n defaultMessage: \"Watermark App Navigation\",\r\n description: \"list of applications by Watermark Insights\",\r\n })}`}\r\n aria-describedby=\"wm-nav-user\"\r\n >\r\n {this.parsedProducts.length > 1 && this.renderProductOptions()}\r\n {this.renderLogoutOption()}\r\n </ul>\r\n );\r\n }\r\n\r\n renderProductOptions(): Array<HTMLPrivNavigatorItemElement> {\r\n return this.parsedProducts.map((product: Product) => {\r\n let name: string | undefined, icon: string | undefined, isSelected: boolean, clickRedirect: any;\r\n\r\n name = product.name;\r\n icon = (product as Product).iconUrl;\r\n\r\n clickRedirect = this.setProductOnClick(product.id);\r\n\r\n if (!!name && !!icon) {\r\n isSelected = this.currentProductId === product.id;\r\n\r\n return (\r\n <priv-navigator-item\r\n selected={isSelected}\r\n id={product.id}\r\n onClick={clickRedirect}\r\n role=\"option\"\r\n aria-label={name}\r\n >\r\n <img src={icon} alt={name} />\r\n </priv-navigator-item>\r\n );\r\n }\r\n });\r\n }\r\n\r\n setProductOnClick(productId: string) {\r\n const product = this.getProduct(productId);\r\n\r\n if (this.currentProductId === productId) {\r\n return () => {};\r\n } else if (product) {\r\n if (!!this.loadFromUserinfo || this.authType === 2) {\r\n return () => (window.location.href = (product as Product).linkUrl);\r\n } else if (this.authType === 3) {\r\n // products passed as prop, saml\r\n const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : \"\";\r\n return () => (window.location.href = (product as Product).samlLinkUrl + connName);\r\n }\r\n }\r\n }\r\n\r\n renderLogoutOption() {\r\n return (\r\n <priv-navigator-item\r\n class=\"logout\"\r\n selected={!(this.parsedProducts.length > 1)}\r\n id=\"nav-logout\"\r\n onClick={this.setLogoutOnclick()}\r\n role=\"option\"\r\n >\r\n <span class=\"logout\">\r\n {intl.formatMessage({\r\n id: \"navigator.logout\",\r\n defaultMessage: \"Log Out\",\r\n })}\r\n </span>\r\n </priv-navigator-item>\r\n );\r\n }\r\n\r\n setLogoutOnclick() {\r\n // The logout item will always emit a custom event on click so that the dev can run any business logic specific to the app on logout (e.g., clearing local storage).\r\n // It will only redirect if the dev has set the logoutUrl. If some sort of custom redirect is needed, the logoutUrl should not be set.\r\n return () => {\r\n this.wmNavigatorLogout.emit();\r\n if (this.logoutUrl) {\r\n window.location.href = this.logoutUrl;\r\n }\r\n };\r\n }\r\n\r\n private get navigatorItems(): Array<HTMLPrivNavigatorItemElement> {\r\n return Array.from(this.el.shadowRoot.querySelectorAll(\"priv-navigator-item\"));\r\n }\r\n\r\n private getProduct(id: string): Product | undefined {\r\n return this.parsedProducts.find((product) => product.id === id);\r\n }\r\n\r\n render() {\r\n return this.retrievedInfo ? (\r\n <Host class={this.isTabbing ? \"user-is-tabbing\" : \"\"}>\r\n <priv-navigator-button expanded={this.isOpen} altText={this.setAltText()} isTabbing={this.isTabbing} />\r\n <div\r\n class={`wrapper ${this.isOpen ? \"\" : \"hide\"} ${this.openRight ? \"right\" : \"\"}`}\r\n ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\r\n >\r\n {this.renderUserInfo()}\r\n {this.parsedProducts.length > 1 && this.renderHeading()}\r\n {this.renderList()}\r\n </div>\r\n </Host>\r\n ) : (\r\n \"\"\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/{p-e746fe88.system.entry.js → p-60e941cc.system.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-08b7ec08.system.js","./p-e782194d.system.js"],(function(t){"use strict";var o,n,e,i,r,a,s,b;return{setters:[function(t){o=t.r;n=t.h;e=t.H;i=t.g},function(t){r=t.g},function(t){a=t.g;s=t.t;b=t.a}],execute:function(){var l=':host .wm-button,wm-button .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-button .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-button .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-button .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-button .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-button .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-button .wm-button.-textonly .button-text,wm-button .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-button .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-button .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-button .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-button .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-button .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi,wm-button .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-button .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-button .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-button .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-button .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled),wm-button .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-button .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled),wm-button .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-selector:hover:not(:disabled):not(.disabled),wm-button .wm-button.-selector:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-button .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}:host .wm-button.-textonly,wm-button .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-button .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-button .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-button .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-button .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-button .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-button .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-button .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete,wm-button .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-button .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled),wm-button .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-button .wm-button.-icononly,:host .wm-button.-navigational,wm-button .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-button .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-button .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-button .wm-button.-icononly,:host .wm-button.-navigational,wm-button .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-button .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-button .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-button .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled),wm-button .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-button .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-button .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-button .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-button .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-button .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-button .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-button .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-button .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}:host .wm-button.-selector,wm-button .wm-button.-selector,:host .wm-button.-selector-primary,wm-button .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:2px solid #575195;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,wm-button .wm-button.-selector,:host .wm-button.-selector-primary,wm-button .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,wm-button .wm-button.-selector:before,:host .wm-button.-selector-primary:before,wm-button .wm-button.-selector-primary:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f140";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:0.875rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,wm-button .wm-button.-selector:active,:host .wm-button.-selector-primary:active,wm-button .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,wm-button .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner,wm-button .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,wm-button .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol,wm-button .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-selector-primary,wm-button .wm-button.-selector-primary{background:#575195;color:#fff}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled),wm-button .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled),wm-button .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button:disabled,wm-button .wm-button:disabled,:host .wm-button.disabled,wm-button .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.-primary,wm-button .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-button .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-button .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-button .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-button .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-button .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-button .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-button .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-secondary,wm-button .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-button .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selector,wm-button .wm-button:disabled.-selector,:host .wm-button.disabled.-selector,wm-button .wm-button.disabled.-selector{color:#737373}:host .wm-button:disabled.-selector-primary,wm-button .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary,wm-button .wm-button.disabled.-selector-primary{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-textonly,wm-button .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-button .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-button .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-selector,wm-button .wm-button:disabled.dark.-selector,:host .wm-button:disabled.dark.-textonly,wm-button .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-button .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-button .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-button .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-selector,wm-button .wm-button.disabled.dark.-selector,:host .wm-button.disabled.dark.-textonly,wm-button .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-button .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-button .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-button .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-selector-primary,wm-button .wm-button:disabled.dark.-selector-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-button .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-button .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-selector-primary,wm-button .wm-button.disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-button .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host a.wm-button,wm-button a.wm-button,:host label.wm-button,wm-button label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host([disabled]),:host(.button-disabled){pointer-events:none}:host([disabled=false]){pointer-events:initial}:host,wm-button{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .sr-only,wm-button .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var d=t("wm_button",function(){function t(t){o(this,t);this.btnPos={old:{},new:{}};this.id=a();this.ariaPopup=false;this.disabled=false;this.buttonType=null;this.buttonStyle=null;this.icon=undefined;this.iconSize=undefined;this.iconRotate=undefined;this.iconFlip=undefined;this.tooltip=undefined;this.labelForIdenticalButtons=undefined;this.tooltipPosition="bottom-right";this.permanentlyDelete=false;this.textWrap=true;this.customBackground=undefined;this.tooltipVisible=false;this.isTabbing=false}Object.defineProperty(t.prototype,"isDisabled",{get:function(){return s(this.disabled)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tempButtonType",{get:function(){return this.buttonType||this.buttonStyle||"secondary"},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"isTruncated",{get:function(){return!!this.buttonEl&&this.tempButtonType==="textonly"&&this.buttonEl.offsetWidth<this.buttonEl.scrollWidth},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"hasTooltip",{get:function(){return this.tempButtonType==="icononly"||this.tempButtonType==="navigational"||this.isTruncated},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tooltipEl",{get:function(){return document.getElementById("wm-tooltip")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"buttonClasses",{get:function(){var t="wm-button";t+=this.permanentlyDelete?" -permanentlydelete":"";t+=this.tempButtonType?" -"+this.tempButtonType:" -secondary";t+=this.textWrap?"":" nowrap";t+=this.isTabbing?" user-is-tabbing":"";t+=this.isTruncated?" -truncated":"";t+=this.customBackground==="dark"?" dark":"";return t},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"iconStyles",{get:function(){var t="";t+=this.iconRotate?"rotate(".concat(this.iconRotate,"deg)"):"";t+=this.iconFlip==="horizontal"?"scaleX(-1)":"";t+=this.iconFlip==="vertical"?"scaleY(-1)":"";return Object.assign(Object.assign({},this.iconSize&&{fontSize:this.iconSize}),(this.iconRotate||this.iconFlip)&&{transform:t})},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleScroll=function(){if(this.tooltipVisible){this.hideTooltip()}};t.prototype.validateType=function(t){var o=["primary","secondary","textonly","icononly","navigational","selector","selector-primary","pairpositive","pairnegative"].includes(t);if(!o){this.buttonType="secondary"}this.validateIcon()};t.prototype.validateDeprecatedType=function(t){var o=["primary","secondary","textonly","icononly","navigational","selector"].includes(t);if(!o){this.buttonStyle="secondary"}this.validateIcon()};t.prototype.updateIcon=function(){this.icon=r(this.icon)};t.prototype.validateIcon=function(){switch(this.tempButtonType){case"icononly":case"navigational":if(!this.icon){console.error("wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.")}if(!this.tooltip){console.error("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.")}break;case"pairpositive":this.icon="f12c";break;case"pairnegative":this.icon="f739";break}};t.prototype.handleKeydown=function(t){switch(t.key){case"Enter":t.preventDefault();if(!this.isDisabled){this.el.click()}break}};t.prototype.componentWillLoad=function(){if(this.buttonStyle){console.warn("wm-button: button-style has been deprecated as of v3.1.0. Please use button-type instead.")}this.validateType(this.tempButtonType);if(this.icon){this.icon=this.icon=r(this.icon)}};t.prototype.componentDidLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.ariaPopup=!!this.el.getAttribute("aria-haspopup");this.btnPos.new=this.buttonEl.getBoundingClientRect()};t.prototype.showTooltip=function(){var t=this;if(this.hasTooltip){var o="";if(this.isTruncated&&this.el.textContent){o=this.el.textContent}else if(this.tooltip){o=this.tooltip}this.tooltipEl.textContent=o;var n=o.match(/^[^\s]+$/);if(n){this.tooltipEl.classList.add("single-word");this.tooltipEl.style.setProperty("--wmTooltipMaxWidth","none")}else{this.tooltipEl.classList.remove("single-word");this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth")}var e=b(this.tooltipPosition,this.buttonEl,this.tooltipEl);this.btnPos.old={};var i=this.tooltipEl.getBoundingClientRect();this.tooltipEl.style.transitionDelay="500ms";this.tooltipEl.style.opacity="1";setTimeout((function(){t.tooltipVisible=true;t.positionTooltip(e,i)}),50)}};t.prototype.positionTooltip=function(t,o){var n=this;if(this.tooltipVisible){window.requestAnimationFrame((function(){return n.positionTooltip(t,o)}))}this.btnPos.new=this.buttonEl.getBoundingClientRect();if(this.btnPos.new.top!=this.btnPos.old.top||this.btnPos.new.left!=this.btnPos.old.left){var e=(this.btnPos.new.height-o.height)/2;var i=(this.btnPos.new.width-o.width)/2;var r=this.btnPos.new.top+e;var a=this.btnPos.new.left+i;if(t.includes("top")){r=this.btnPos.new.top-o.height-8}if(t.includes("bottom")){r=this.btnPos.new.bottom+8}if(t.includes("left")){a=this.btnPos.new.left-o.width-8}if(t.includes("right")){a=this.btnPos.new.right+8}a=Math.max(a,24);this.tooltipEl.style.setProperty("--wmTooltipTop",r+"px");this.tooltipEl.style.setProperty("--wmTooltipLeft",a+"px");this.btnPos.old=this.btnPos.new}};t.prototype.hideTooltip=function(){if(this.hasTooltip){this.tooltipEl.style.transitionDelay="0s";this.tooltipEl.style.opacity="0";this.tooltipVisible=false}};t.prototype.showTooltipForKeyboardUsers=function(){if(this.isTabbing){this.showTooltip()}};t.prototype.getAriaLabel=function(){if(this.tempButtonType==="icononly"||this.tempButtonType==="navigational"){return this.labelForIdenticalButtons||this.tooltip}if(this.labelForIdenticalButtons){return this.labelForIdenticalButtons}};t.prototype.render=function(){var t=this;return n(e,{class:this.isDisabled?"button-disabled":""},n("button",{id:this.id,class:"".concat(this.buttonClasses),disabled:this.isDisabled,ref:function(o){return t.buttonEl=o},"aria-label":this.getAriaLabel(),"aria-hasPopup":this.ariaPopup?"menu":null,onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltipForKeyboardUsers()},onBlur:function(){return t.hideTooltip()},onClick:function(){return t.hideTooltip()}},this.icon&&n("span",{class:"mdi",style:this.iconStyles},String.fromCodePoint(parseInt("0x".concat(this.icon)))),n("span",{class:"button-text"},n("slot",null))))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{buttonType:["validateType"],buttonStyle:["validateDeprecatedType"],icon:["updateIcon"]}},enumerable:false,configurable:true});return t}());d.style=l}}}));
-//# sourceMappingURL=p-e746fe88.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f5df5903.system.js","./p-f08e6a5a.system.js"],(function(t){"use strict";var o,n,e,i,r,a,s,b;return{setters:[function(t){o=t.r;n=t.h;e=t.H;i=t.g},function(t){r=t.g},function(t){a=t.g;s=t.t;b=t.a}],execute:function(){var l=':host .wm-button,wm-button .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-button .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-button .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-button .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-button .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-button .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-button .wm-button.-textonly .button-text,wm-button .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-button .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-button .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-button .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-button .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-button .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-button .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi,wm-button .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-button .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-button .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-button .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-button .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled),wm-button .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-button .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled),wm-button .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-selector:hover:not(:disabled):not(.disabled),wm-button .wm-button.-selector:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-button .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}:host .wm-button.-textonly,wm-button .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-button .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-button .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-button .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-button .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-button .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-button .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-button .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete,wm-button .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-button .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled),wm-button .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-button .wm-button.-icononly,:host .wm-button.-navigational,wm-button .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-button .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-button .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-button .wm-button.-icononly,:host .wm-button.-navigational,wm-button .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-button .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-button .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-button .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled),wm-button .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-button .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-button .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-button .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-button .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-button .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-button .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-button .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-button .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-button .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}:host .wm-button.-selector,wm-button .wm-button.-selector,:host .wm-button.-selector-primary,wm-button .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:2px solid #575195;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,wm-button .wm-button.-selector,:host .wm-button.-selector-primary,wm-button .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,wm-button .wm-button.-selector:before,:host .wm-button.-selector-primary:before,wm-button .wm-button.-selector-primary:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f140";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:0.875rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,wm-button .wm-button.-selector:active,:host .wm-button.-selector-primary:active,wm-button .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,wm-button .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner,wm-button .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,wm-button .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol,wm-button .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover,wm-button .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-selector-primary,wm-button .wm-button.-selector-primary{background:#575195;color:#fff}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled),wm-button .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled),wm-button .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button:disabled,wm-button .wm-button:disabled,:host .wm-button.disabled,wm-button .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.-primary,wm-button .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-button .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-button .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-button .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-button .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-button .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-button .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-button .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-secondary,wm-button .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-button .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selector,wm-button .wm-button:disabled.-selector,:host .wm-button.disabled.-selector,wm-button .wm-button.disabled.-selector{color:#737373}:host .wm-button:disabled.-selector-primary,wm-button .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary,wm-button .wm-button.disabled.-selector-primary{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-textonly,wm-button .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-button .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-button .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-selector,wm-button .wm-button:disabled.dark.-selector,:host .wm-button:disabled.dark.-textonly,wm-button .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-button .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-button .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-button .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-selector,wm-button .wm-button.disabled.dark.-selector,:host .wm-button.disabled.dark.-textonly,wm-button .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-button .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-button .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-button .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-selector-primary,wm-button .wm-button:disabled.dark.-selector-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-button .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-button .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-selector-primary,wm-button .wm-button.disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-button .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host a.wm-button,wm-button a.wm-button,:host label.wm-button,wm-button label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host([disabled]),:host(.button-disabled){pointer-events:none}:host([disabled=false]){pointer-events:initial}:host,wm-button{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .sr-only,wm-button .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';var d=t("wm_button",function(){function t(t){o(this,t);this.btnPos={old:{},new:{}};this.id=a();this.ariaPopup=false;this.disabled=false;this.buttonType=null;this.buttonStyle=null;this.icon=undefined;this.iconSize=undefined;this.iconRotate=undefined;this.iconFlip=undefined;this.tooltip=undefined;this.labelForIdenticalButtons=undefined;this.tooltipPosition="bottom-right";this.permanentlyDelete=false;this.textWrap=true;this.customBackground=undefined;this.tooltipVisible=false;this.isTabbing=false}Object.defineProperty(t.prototype,"isDisabled",{get:function(){return s(this.disabled)},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tempButtonType",{get:function(){return this.buttonType||this.buttonStyle||"secondary"},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"isTruncated",{get:function(){return!!this.buttonEl&&this.tempButtonType==="textonly"&&this.buttonEl.offsetWidth<this.buttonEl.scrollWidth},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"hasTooltip",{get:function(){return this.tempButtonType==="icononly"||this.tempButtonType==="navigational"||this.isTruncated},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tooltipEl",{get:function(){return document.getElementById("wm-tooltip")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"buttonClasses",{get:function(){var t="wm-button";t+=this.permanentlyDelete?" -permanentlydelete":"";t+=this.tempButtonType?" -"+this.tempButtonType:" -secondary";t+=this.textWrap?"":" nowrap";t+=this.isTabbing?" user-is-tabbing":"";t+=this.isTruncated?" -truncated":"";t+=this.customBackground==="dark"?" dark":"";return t},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"iconStyles",{get:function(){var t="";t+=this.iconRotate?"rotate(".concat(this.iconRotate,"deg)"):"";t+=this.iconFlip==="horizontal"?"scaleX(-1)":"";t+=this.iconFlip==="vertical"?"scaleY(-1)":"";return Object.assign(Object.assign({},this.iconSize&&{fontSize:this.iconSize}),(this.iconRotate||this.iconFlip)&&{transform:t})},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleScroll=function(){if(this.tooltipVisible){this.hideTooltip()}};t.prototype.validateType=function(t){var o=["primary","secondary","textonly","icononly","navigational","selector","selector-primary","pairpositive","pairnegative"].includes(t);if(!o){this.buttonType="secondary"}this.validateIcon()};t.prototype.validateDeprecatedType=function(t){var o=["primary","secondary","textonly","icononly","navigational","selector"].includes(t);if(!o){this.buttonStyle="secondary"}this.validateIcon()};t.prototype.updateIcon=function(){this.icon=r(this.icon)};t.prototype.validateIcon=function(){switch(this.tempButtonType){case"icononly":case"navigational":if(!this.icon){console.error("wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.")}if(!this.tooltip){console.error("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.")}break;case"pairpositive":this.icon="f12c";break;case"pairnegative":this.icon="f739";break}};t.prototype.handleKeydown=function(t){switch(t.key){case"Enter":t.preventDefault();if(!this.isDisabled){this.el.click()}break}};t.prototype.componentWillLoad=function(){if(this.buttonStyle){console.warn("wm-button: button-style has been deprecated as of v3.1.0. Please use button-type instead.")}this.validateType(this.tempButtonType);if(this.icon){this.icon=this.icon=r(this.icon)}};t.prototype.componentDidLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.ariaPopup=!!this.el.getAttribute("aria-haspopup");this.btnPos.new=this.buttonEl.getBoundingClientRect()};t.prototype.showTooltip=function(){var t=this;if(this.hasTooltip){var o="";if(this.isTruncated&&this.el.textContent){o=this.el.textContent}else if(this.tooltip){o=this.tooltip}this.tooltipEl.textContent=o;var n=o.match(/^[^\s]+$/);if(n){this.tooltipEl.classList.add("single-word");this.tooltipEl.style.setProperty("--wmTooltipMaxWidth","none")}else{this.tooltipEl.classList.remove("single-word");this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth")}var e=b(this.tooltipPosition,this.buttonEl,this.tooltipEl);this.btnPos.old={};var i=this.tooltipEl.getBoundingClientRect();this.tooltipEl.style.transitionDelay="500ms";this.tooltipEl.style.opacity="1";setTimeout((function(){t.tooltipVisible=true;t.positionTooltip(e,i)}),50)}};t.prototype.positionTooltip=function(t,o){var n=this;if(this.tooltipVisible){window.requestAnimationFrame((function(){return n.positionTooltip(t,o)}))}this.btnPos.new=this.buttonEl.getBoundingClientRect();if(this.btnPos.new.top!=this.btnPos.old.top||this.btnPos.new.left!=this.btnPos.old.left){var e=(this.btnPos.new.height-o.height)/2;var i=(this.btnPos.new.width-o.width)/2;var r=this.btnPos.new.top+e;var a=this.btnPos.new.left+i;if(t.includes("top")){r=this.btnPos.new.top-o.height-8}if(t.includes("bottom")){r=this.btnPos.new.bottom+8}if(t.includes("left")){a=this.btnPos.new.left-o.width-8}if(t.includes("right")){a=this.btnPos.new.right+8}a=Math.max(a,24);this.tooltipEl.style.setProperty("--wmTooltipTop",r+"px");this.tooltipEl.style.setProperty("--wmTooltipLeft",a+"px");this.btnPos.old=this.btnPos.new}};t.prototype.hideTooltip=function(){if(this.hasTooltip){this.tooltipEl.style.transitionDelay="0s";this.tooltipEl.style.opacity="0";this.tooltipVisible=false}};t.prototype.showTooltipForKeyboardUsers=function(){if(this.isTabbing){this.showTooltip()}};t.prototype.getAriaLabel=function(){if(this.tempButtonType==="icononly"||this.tempButtonType==="navigational"){return this.labelForIdenticalButtons||this.tooltip}if(this.labelForIdenticalButtons){return this.labelForIdenticalButtons}};t.prototype.render=function(){var t=this;return n(e,{class:this.isDisabled?"button-disabled":""},n("button",{id:this.id,class:"".concat(this.buttonClasses),disabled:this.isDisabled,ref:function(o){return t.buttonEl=o},"aria-label":this.getAriaLabel(),"aria-hasPopup":this.ariaPopup?"menu":null,onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltipForKeyboardUsers()},onBlur:function(){return t.hideTooltip()},onClick:function(){return t.hideTooltip()}},this.icon&&n("span",{class:"mdi",style:this.iconStyles},String.fromCodePoint(parseInt("0x".concat(this.icon)))),n("span",{class:"button-text"},n("slot",null))))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{buttonType:["validateType"],buttonStyle:["validateDeprecatedType"],icon:["updateIcon"]}},enumerable:false,configurable:true});return t}());d.style=l}}}));
+//# sourceMappingURL=p-60e941cc.system.entry.js.map

package/dist/ripple/p-60e941cc.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["wmButtonCss","Button","exports","this","btnPos","old","new","id","generateId","ariaPopup","Object","defineProperty","class_1","prototype","toBool","disabled","buttonType","buttonStyle","buttonEl","tempButtonType","offsetWidth","scrollWidth","isTruncated","document","getElementById","classes","permanentlyDelete","textWrap","isTabbing","customBackground","transformStyle","iconRotate","concat","iconFlip","assign","iconSize","fontSize","transform","toggleTabbingOn","toggleTabbingOff","handleScroll","tooltipVisible","hideTooltip","validateType","newValue","valid","includes","validateIcon","validateDeprecatedType","updateIcon","icon","getIconCodeFromName","console","error","tooltip","handleKeydown","ev","key","preventDefault","isDisabled","el","click","componentWillLoad","warn","componentDidLoad","body","classList","contains","getAttribute","getBoundingClientRect","showTooltip","_this","hasTooltip","tooltipText","textContent","tooltipEl","hasNoWhitespace","match","add","style","setProperty","remove","removeProperty","adjustedTooltipPlacement_1","adjustTooltipPlacement","tooltipPosition","tooltipRect_1","transitionDelay","opacity","setTimeout","positionTooltip","tPos","tooltipRect","window","requestAnimationFrame","top","left","vDiff","height","hDiff","width","vPos","hPos","bottom","right","Math","max","showTooltipForKeyboardUsers","getAriaLabel","labelForIdenticalButtons","render","h","Host","class","buttonClasses","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","iconStyles","String","fromCodePoint","parseInt"],"sources":["src/components/wm-button/wm-button.scss?tag=wm-button&encapsulation=shadow","src/components/wm-button/wm-button.tsx"],"sourcesContent":[":host([disabled]),\r\n:host(.button-disabled) {\r\n pointer-events: none;\r\n}\r\n\r\n:host([disabled=\"false\"]) {\r\n // override disabled behavior from occuring when the string is \"false\", which would evaluate as truthy\r\n pointer-events: initial;\r\n}\r\n\r\n:host,\r\nwm-button {\r\n display: inline-block;\r\n width: fit-content;\r\n position: relative; // for tooltip\r\n @include box-shadow(none);\r\n\r\n .sr-only {\r\n @include srOnly;\r\n }\r\n\r\n @extend %wm-button;\r\n}\r\n","import { h, Component, Prop, Element, Listen, Watch, Host, State } from \"@stencil/core\";\r\nimport { getIconCodeFromName, TooltipPlacement, validButtonTypes } from \"../../global/interfaces\";\r\nimport { generateId, adjustTooltipPlacement, toBool } from \"../../global/functions\";\r\n\r\n@Component({\r\n tag: \"wm-button\",\r\n styleUrl: \"wm-button.scss\",\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class Button {\r\n @Element() el!: HTMLWmButtonElement;\r\n private buttonEl!: HTMLButtonElement;\r\n\r\n // icon and tooltip have reflect set to true. Without reflect, the react wrappers don't expose the attribute\r\n // and the component throws errors when they are required (when buttonType is icononly or navigational)\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n get isDisabled(): boolean {\r\n // string \"false\" needs to be treated as bool False because react wrappers convert bool to string.\r\n return toBool(this.disabled);\r\n }\r\n @Prop({ mutable: true }) buttonType: validButtonTypes | null = null;\r\n @Prop({ mutable: true }) buttonStyle: validButtonTypes | null = null; // DEPRECATED in favor of button-type\r\n get tempButtonType(): validButtonTypes {\r\n // uses of this getter should be replaced with this.buttonType when buttonStyle is fully phased out\r\n // don't forget to reset this.buttonType's default value to secondary\r\n return this.buttonType || this.buttonStyle || \"secondary\";\r\n }\r\n @Prop({ reflect: true, mutable: true }) icon?: string;\r\n @Prop() iconSize?: string;\r\n @Prop() iconRotate?: number;\r\n @Prop() iconFlip?: \"horizontal\" | \"vertical\";\r\n @Prop({ reflect: true, mutable: true }) tooltip?: string;\r\n @Prop() labelForIdenticalButtons?: string;\r\n @Prop() tooltipPosition: TooltipPlacement = \"bottom-right\";\r\n @Prop() permanentlyDelete?: boolean = false;\r\n @Prop() textWrap: boolean = true;\r\n @Prop() customBackground?: string;\r\n @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\r\n\r\n @State() isTabbing: boolean = false;\r\n\r\n private btnPos: any = { old: {}, new: {} }; // for tooltip position. old and new are DOMRect\r\n private id = generateId();\r\n private ariaPopup: boolean = false;\r\n\r\n get isTruncated(): boolean {\r\n return (\r\n !!this.buttonEl && this.tempButtonType === \"textonly\" && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth\r\n );\r\n }\r\n\r\n get hasTooltip(): boolean {\r\n // tooltip is only rendered for icononly and navigational types, or if the button text is truncated\r\n return this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\" || this.isTruncated;\r\n }\r\n\r\n get tooltipEl(): HTMLElement {\r\n return document.getElementById(\"wm-tooltip\")!;\r\n }\r\n\r\n get buttonClasses() {\r\n let classes = \"wm-button\";\r\n classes += this.permanentlyDelete ? \" -permanentlydelete\" : \"\";\r\n classes += this.tempButtonType ? \" -\" + this.tempButtonType : \" -secondary\";\r\n classes += this.textWrap ? \"\" : \" nowrap\";\r\n classes += this.isTabbing ? \" user-is-tabbing\" : \"\";\r\n classes += this.isTruncated ? \" -truncated\" : \"\";\r\n classes += this.customBackground === \"dark\" ? \" dark\" : \"\";\r\n return classes;\r\n }\r\n\r\n get iconStyles() {\r\n let transformStyle = \"\";\r\n transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : \"\";\r\n transformStyle += this.iconFlip === \"horizontal\" ? `scaleX(-1)` : \"\";\r\n transformStyle += this.iconFlip === \"vertical\" ? `scaleY(-1)` : \"\";\r\n\r\n return {\r\n ...(this.iconSize && { fontSize: this.iconSize }),\r\n ...((this.iconRotate || this.iconFlip) && { transform: transformStyle }),\r\n };\r\n }\r\n\r\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n toggleTabbingOn() {\r\n this.isTabbing = true;\r\n }\r\n\r\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n toggleTabbingOff() {\r\n this.isTabbing = false;\r\n }\r\n\r\n // we need to listen for scroll events during the capture phase because they do not bubble up\r\n // there can be layouts where the main content has 100vh and overflows\r\n // in these cases window will register no scroll events unless we catch on they way down\r\n @Listen(\"scroll\", { target: \"window\", capture: true })\r\n handleScroll() {\r\n if (this.tooltipVisible) {\r\n this.hideTooltip();\r\n }\r\n }\r\n\r\n @Watch(\"buttonType\")\r\n validateType(newValue: string) {\r\n const valid = [\r\n \"primary\",\r\n \"secondary\",\r\n \"textonly\",\r\n \"icononly\",\r\n \"navigational\",\r\n \"selector\",\r\n \"selector-primary\",\r\n \"pairpositive\",\r\n \"pairnegative\",\r\n ].includes(newValue);\r\n\r\n if (!valid) {\r\n this.buttonType = \"secondary\";\r\n }\r\n\r\n this.validateIcon();\r\n }\r\n\r\n // remove entire watcher after buttonStyle has been fully removed\r\n @Watch(\"buttonStyle\")\r\n validateDeprecatedType(newValue: string) {\r\n const valid = [\"primary\", \"secondary\", \"textonly\", \"icononly\", \"navigational\", \"selector\"].includes(newValue);\r\n\r\n if (!valid) {\r\n this.buttonStyle = \"secondary\";\r\n }\r\n\r\n this.validateIcon();\r\n }\r\n\r\n @Watch(\"icon\")\r\n updateIcon() {\r\n this.icon = getIconCodeFromName(this.icon!);\r\n }\r\n\r\n validateIcon() {\r\n switch (this.tempButtonType) {\r\n case \"icononly\":\r\n case \"navigational\":\r\n // if the style is icononly or navigational...\r\n // - an icon must be provided\r\n if (!this.icon) {\r\n console.error(\r\n \"wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.\"\r\n );\r\n }\r\n // - if no tooltip text was passed and we couldn't generate one, throw an error\r\n if (!this.tooltip) {\r\n console.error(\r\n \"wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.\"\r\n );\r\n }\r\n break;\r\n case \"pairpositive\":\r\n this.icon = \"f12c\";\r\n break;\r\n case \"pairnegative\":\r\n this.icon = \"f739\";\r\n break;\r\n }\r\n }\r\n\r\n @Listen(\"keydown\")\r\n handleKeydown(ev: KeyboardEvent) {\r\n switch (ev.key) {\r\n case \"Enter\":\r\n ev.preventDefault();\r\n if (!this.isDisabled) {\r\n this.el.click();\r\n }\r\n break;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.buttonStyle) {\r\n console.warn(\"wm-button: button-style has been deprecated as of v3.1.0. Please use button-type instead.\");\r\n }\r\n\r\n this.validateType(this.tempButtonType);\r\n\r\n if (this.icon) {\r\n this.icon = this.icon = getIconCodeFromName(this.icon);\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n this.toggleTabbingOn();\r\n }\r\n\r\n this.ariaPopup = !!this.el.getAttribute(\"aria-haspopup\");\r\n\r\n this.btnPos.new = this.buttonEl.getBoundingClientRect();\r\n }\r\n\r\n showTooltip() {\r\n if (this.hasTooltip) {\r\n // set tooltip text\r\n let tooltipText = \"\";\r\n if (this.isTruncated && this.el.textContent) {\r\n // when truncated, tooltip text is the button's content\r\n tooltipText = this.el.textContent;\r\n } else if (this.tooltip) {\r\n // otherwise it is the tooltip property if present\r\n tooltipText = this.tooltip;\r\n }\r\n this.tooltipEl.textContent = tooltipText;\r\n\r\n // tooltip only has a maxWidth if it contains whitespace and can break\r\n const hasNoWhitespace = tooltipText.match(/^[^\\s]+$/);\r\n if (hasNoWhitespace) {\r\n this.tooltipEl.classList.add(\"single-word\");\r\n this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\r\n } else {\r\n this.tooltipEl.classList.remove(\"single-word\");\r\n this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\r\n }\r\n\r\n // adjust placement in case there is no space to place the tooltip where specified via prop\r\n // calculation outside of the function to keep it pure\r\n const adjustedTooltipPlacement = adjustTooltipPlacement(this.tooltipPosition, this.buttonEl, this.tooltipEl);\r\n\r\n this.btnPos.old = {};\r\n const tooltipRect = this.tooltipEl.getBoundingClientRect();\r\n this.tooltipEl.style.transitionDelay = \"500ms\";\r\n this.tooltipEl.style.opacity = \"1\";\r\n // This slight delay fixes an issue for keyboard users:\r\n // if they tab to a button out of screen bounds, the page scrolls\r\n // and hideTooltip() would be triggered before the tooltip would show\r\n setTimeout(() => {\r\n this.tooltipVisible = true;\r\n this.positionTooltip(adjustedTooltipPlacement, tooltipRect);\r\n }, 50);\r\n }\r\n }\r\n\r\n positionTooltip(tPos: string, tooltipRect: DOMRect) {\r\n if (this.tooltipVisible) {\r\n window.requestAnimationFrame(() => this.positionTooltip(tPos, tooltipRect));\r\n }\r\n this.btnPos.new = this.buttonEl.getBoundingClientRect();\r\n if (this.btnPos.new.top != this.btnPos.old.top || this.btnPos.new.left != this.btnPos.old.left) {\r\n // this is to figure out how to offset, given the size of the button and of the tooltip\r\n // to get the center positions, calculate the difference between the button width and the tooltip width\r\n const vDiff = (this.btnPos.new.height - tooltipRect.height) / 2;\r\n const hDiff = (this.btnPos.new.width - tooltipRect.width) / 2;\r\n // the naming convention defaults to center in the absence of a value\r\n // Values \"top\" and \"bottom\" imply horizontal centering; Values \"right\" and \"left\" imply vertical centering\r\n // therefore we first set to center first, then adjust accordingly\r\n let vPos = this.btnPos.new.top + vDiff;\r\n let hPos = this.btnPos.new.left + hDiff;\r\n\r\n if (tPos.includes(\"top\")) {\r\n vPos = this.btnPos.new.top - tooltipRect.height - 8;\r\n }\r\n if (tPos.includes(\"bottom\")) {\r\n vPos = this.btnPos.new.bottom + 8;\r\n }\r\n if (tPos.includes(\"left\")) {\r\n hPos = this.btnPos.new.left - tooltipRect.width - 8;\r\n }\r\n if (tPos.includes(\"right\")) {\r\n hPos = this.btnPos.new.right + 8;\r\n }\r\n\r\n // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted\r\n // this only occurs when the tooltip is overflowing to the left and is positioned top or bottom\r\n // (button placed too far left, or screen size under 268px)\r\n hPos = Math.max(hPos, 24);\r\n this.tooltipEl.style.setProperty(\"--wmTooltipTop\", vPos + \"px\");\r\n this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", hPos + \"px\");\r\n // this.tooltipEl.style.top = vPos + \"px\";\r\n // this.tooltipEl.style.left = hPos + \"px\";\r\n // this.tooltipEl.style.top = (vPos / 16).toString() + \"rem\";\r\n // this.tooltipEl.style.left = (hPos / 16).toString() + \"rem\";\r\n\r\n this.btnPos.old = this.btnPos.new;\r\n }\r\n }\r\n\r\n hideTooltip() {\r\n if (this.hasTooltip) {\r\n this.tooltipEl.style.transitionDelay = \"0s\";\r\n this.tooltipEl.style.opacity = \"0\";\r\n this.tooltipVisible = false;\r\n }\r\n }\r\n\r\n showTooltipForKeyboardUsers() {\r\n if (this.isTabbing) {\r\n this.showTooltip();\r\n }\r\n }\r\n\r\n getAriaLabel() {\r\n if (this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\") {\r\n return this.labelForIdenticalButtons || this.tooltip;\r\n }\r\n\r\n if (this.labelForIdenticalButtons) {\r\n return this.labelForIdenticalButtons;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host class={this.isDisabled ? \"button-disabled\" : \"\"}>\r\n <button\r\n id={this.id}\r\n class={`${this.buttonClasses}`}\r\n disabled={this.isDisabled}\r\n ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\r\n aria-label={this.getAriaLabel()}\r\n aria-hasPopup={this.ariaPopup ? \"menu\" : null}\r\n onMouseEnter={() => this.showTooltip()}\r\n onMouseLeave={() => this.hideTooltip()}\r\n onFocus={() => this.showTooltipForKeyboardUsers()}\r\n onBlur={() => this.hideTooltip()}\r\n onClick={() => this.hideTooltip()}\r\n >\r\n {this.icon && (\r\n <span class=\"mdi\" style={this.iconStyles}>\r\n {String.fromCodePoint(parseInt(`0x${this.icon}`))}\r\n </span>\r\n )}\r\n <span class=\"button-text\">\r\n <slot />\r\n </span>\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"sQAAA,IAAMA,EAAc,q6lB,ICSPC,EAAMC,EAAA,uB,wBAgCTC,KAAAC,OAAc,CAAEC,IAAK,GAAIC,IAAK,IAC9BH,KAAAI,GAAKC,IACLL,KAAAM,UAAqB,M,cA5BgB,M,gBAKkB,K,iBACC,K,kLAYpB,e,uBACN,M,cACV,K,oDAEc,M,eAEZ,K,CAvB9BC,OAAAC,eAAIC,EAAAC,UAAA,aAAU,C,IAAd,WAEE,OAAOC,EAAOX,KAAKY,S,uCAIrBL,OAAAC,eAAIC,EAAAC,UAAA,iBAAc,C,IAAlB,WAGE,OAAOV,KAAKa,YAAcb,KAAKc,aAAe,W,uCAoBhDP,OAAAC,eAAIC,EAAAC,UAAA,cAAW,C,IAAf,WACE,QACIV,KAAKe,UAAYf,KAAKgB,iBAAmB,YAAchB,KAAKe,SAASE,YAAcjB,KAAKe,SAASG,W,uCAIvGX,OAAAC,eAAIC,EAAAC,UAAA,aAAU,C,IAAd,WAEE,OAAOV,KAAKgB,iBAAmB,YAAchB,KAAKgB,iBAAmB,gBAAkBhB,KAAKmB,W,uCAG9FZ,OAAAC,eAAIC,EAAAC,UAAA,YAAS,C,IAAb,WACE,OAAOU,SAASC,eAAe,a,uCAGjCd,OAAAC,eAAIC,EAAAC,UAAA,gBAAa,C,IAAjB,WACE,IAAIY,EAAU,YACdA,GAAWtB,KAAKuB,kBAAoB,sBAAwB,GAC5DD,GAAWtB,KAAKgB,eAAiB,KAAOhB,KAAKgB,eAAiB,cAC9DM,GAAWtB,KAAKwB,SAAW,GAAK,UAChCF,GAAWtB,KAAKyB,UAAY,mBAAqB,GACjDH,GAAWtB,KAAKmB,YAAc,cAAgB,GAC9CG,GAAWtB,KAAK0B,mBAAqB,OAAS,QAAU,GACxD,OAAOJ,C,uCAGTf,OAAAC,eAAIC,EAAAC,UAAA,aAAU,C,IAAd,WACE,IAAIiB,EAAiB,GACrBA,GAAkB3B,KAAK4B,WAAa,UAAAC,OAAU7B,KAAK4B,WAAU,QAAS,GACtED,GAAkB3B,KAAK8B,WAAa,aAAe,aAAe,GAClEH,GAAkB3B,KAAK8B,WAAa,WAAa,aAAe,GAEhE,OAAAvB,OAAAwB,OAAAxB,OAAAwB,OAAA,GACM/B,KAAKgC,UAAY,CAAEC,SAAUjC,KAAKgC,YACjChC,KAAK4B,YAAc5B,KAAK8B,WAAa,CAAEI,UAAWP,G,uCAK3DlB,EAAAC,UAAAyB,gBAAA,WACEnC,KAAKyB,UAAY,I,EAInBhB,EAAAC,UAAA0B,iBAAA,WACEpC,KAAKyB,UAAY,K,EAOnBhB,EAAAC,UAAA2B,aAAA,WACE,GAAIrC,KAAKsC,eAAgB,CACvBtC,KAAKuC,a,GAKT9B,EAAAC,UAAA8B,aAAA,SAAaC,GACX,IAAMC,EAAQ,CACZ,UACA,YACA,WACA,WACA,eACA,WACA,mBACA,eACA,gBACAC,SAASF,GAEX,IAAKC,EAAO,CACV1C,KAAKa,WAAa,W,CAGpBb,KAAK4C,c,EAKPnC,EAAAC,UAAAmC,uBAAA,SAAuBJ,GACrB,IAAMC,EAAQ,CAAC,UAAW,YAAa,WAAY,WAAY,eAAgB,YAAYC,SAASF,GAEpG,IAAKC,EAAO,CACV1C,KAAKc,YAAc,W,CAGrBd,KAAK4C,c,EAIPnC,EAAAC,UAAAoC,WAAA,WACE9C,KAAK+C,KAAOC,EAAoBhD,KAAK+C,K,EAGvCtC,EAAAC,UAAAkC,aAAA,WACE,OAAQ5C,KAAKgB,gBACX,IAAK,WACL,IAAK,eAGH,IAAKhB,KAAK+C,KAAM,CACdE,QAAQC,MACN,yG,CAIJ,IAAKlD,KAAKmD,QAAS,CACjBF,QAAQC,MACN,4G,CAGJ,MACF,IAAK,eACHlD,KAAK+C,KAAO,OACZ,MACF,IAAK,eACH/C,KAAK+C,KAAO,OACZ,M,EAKNtC,EAAAC,UAAA0C,cAAA,SAAcC,GACZ,OAAQA,EAAGC,KACT,IAAK,QACHD,EAAGE,iBACH,IAAKvD,KAAKwD,WAAY,CACpBxD,KAAKyD,GAAGC,O,CAEV,M,EAINjD,EAAAC,UAAAiD,kBAAA,WACE,GAAI3D,KAAKc,YAAa,CACpBmC,QAAQW,KAAK,4F,CAGf5D,KAAKwC,aAAaxC,KAAKgB,gBAEvB,GAAIhB,KAAK+C,KAAM,CACb/C,KAAK+C,KAAO/C,KAAK+C,KAAOC,EAAoBhD,KAAK+C,K,GAIrDtC,EAAAC,UAAAmD,iBAAA,WACE,GAAIzC,SAAS0C,KAAKC,UAAUC,SAAS,wBAAyB,CAC5DhE,KAAKmC,iB,CAGPnC,KAAKM,YAAcN,KAAKyD,GAAGQ,aAAa,iBAExCjE,KAAKC,OAAOE,IAAMH,KAAKe,SAASmD,uB,EAGlCzD,EAAAC,UAAAyD,YAAA,eAAAC,EAAApE,KACE,GAAIA,KAAKqE,WAAY,CAEnB,IAAIC,EAAc,GAClB,GAAItE,KAAKmB,aAAenB,KAAKyD,GAAGc,YAAa,CAE3CD,EAActE,KAAKyD,GAAGc,W,MACjB,GAAIvE,KAAKmD,QAAS,CAEvBmB,EAActE,KAAKmD,O,CAErBnD,KAAKwE,UAAUD,YAAcD,EAG7B,IAAMG,EAAkBH,EAAYI,MAAM,YAC1C,GAAID,EAAiB,CACnBzE,KAAKwE,UAAUT,UAAUY,IAAI,eAC7B3E,KAAKwE,UAAUI,MAAMC,YAAY,sBAAuB,O,KACnD,CACL7E,KAAKwE,UAAUT,UAAUe,OAAO,eAChC9E,KAAKwE,UAAUI,MAAMG,eAAe,sB,CAKtC,IAAMC,EAA2BC,EAAuBjF,KAAKkF,gBAAiBlF,KAAKe,SAAUf,KAAKwE,WAElGxE,KAAKC,OAAOC,IAAM,GAClB,IAAMiF,EAAcnF,KAAKwE,UAAUN,wBACnClE,KAAKwE,UAAUI,MAAMQ,gBAAkB,QACvCpF,KAAKwE,UAAUI,MAAMS,QAAU,IAI/BC,YAAW,WACTlB,EAAK9B,eAAiB,KACtB8B,EAAKmB,gBAAgBP,EAA0BG,E,GAC9C,G,GAIP1E,EAAAC,UAAA6E,gBAAA,SAAgBC,EAAcC,GAA9B,IAAArB,EAAApE,KACE,GAAIA,KAAKsC,eAAgB,CACvBoD,OAAOC,uBAAsB,WAAM,OAAAvB,EAAKmB,gBAAgBC,EAAMC,EAA3B,G,CAErCzF,KAAKC,OAAOE,IAAMH,KAAKe,SAASmD,wBAChC,GAAIlE,KAAKC,OAAOE,IAAIyF,KAAO5F,KAAKC,OAAOC,IAAI0F,KAAO5F,KAAKC,OAAOE,IAAI0F,MAAQ7F,KAAKC,OAAOC,IAAI2F,KAAM,CAG9F,IAAMC,GAAS9F,KAAKC,OAAOE,IAAI4F,OAASN,EAAYM,QAAU,EAC9D,IAAMC,GAAShG,KAAKC,OAAOE,IAAI8F,MAAQR,EAAYQ,OAAS,EAI5D,IAAIC,EAAOlG,KAAKC,OAAOE,IAAIyF,IAAME,EACjC,IAAIK,EAAOnG,KAAKC,OAAOE,IAAI0F,KAAOG,EAElC,GAAIR,EAAK7C,SAAS,OAAQ,CACxBuD,EAAOlG,KAAKC,OAAOE,IAAIyF,IAAMH,EAAYM,OAAS,C,CAEpD,GAAIP,EAAK7C,SAAS,UAAW,CAC3BuD,EAAOlG,KAAKC,OAAOE,IAAIiG,OAAS,C,CAElC,GAAIZ,EAAK7C,SAAS,QAAS,CACzBwD,EAAOnG,KAAKC,OAAOE,IAAI0F,KAAOJ,EAAYQ,MAAQ,C,CAEpD,GAAIT,EAAK7C,SAAS,SAAU,CAC1BwD,EAAOnG,KAAKC,OAAOE,IAAIkG,MAAQ,C,CAMjCF,EAAOG,KAAKC,IAAIJ,EAAM,IACtBnG,KAAKwE,UAAUI,MAAMC,YAAY,iBAAkBqB,EAAO,MAC1DlG,KAAKwE,UAAUI,MAAMC,YAAY,kBAAmBsB,EAAO,MAM3DnG,KAAKC,OAAOC,IAAMF,KAAKC,OAAOE,G,GAIlCM,EAAAC,UAAA6B,YAAA,WACE,GAAIvC,KAAKqE,WAAY,CACnBrE,KAAKwE,UAAUI,MAAMQ,gBAAkB,KACvCpF,KAAKwE,UAAUI,MAAMS,QAAU,IAC/BrF,KAAKsC,eAAiB,K,GAI1B7B,EAAAC,UAAA8F,4BAAA,WACE,GAAIxG,KAAKyB,UAAW,CAClBzB,KAAKmE,a,GAIT1D,EAAAC,UAAA+F,aAAA,WACE,GAAIzG,KAAKgB,iBAAmB,YAAchB,KAAKgB,iBAAmB,eAAgB,CAChF,OAAOhB,KAAK0G,0BAA4B1G,KAAKmD,O,CAG/C,GAAInD,KAAK0G,yBAA0B,CACjC,OAAO1G,KAAK0G,wB,GAIhBjG,EAAAC,UAAAiG,OAAA,eAAAvC,EAAApE,KACE,OACE4G,EAACC,EAAI,CAACC,MAAO9G,KAAKwD,WAAa,kBAAoB,IACjDoD,EAAA,UACExG,GAAIJ,KAAKI,GACT0G,MAAO,GAAAjF,OAAG7B,KAAK+G,eACfnG,SAAUZ,KAAKwD,WACfwD,IAAK,SAACvD,GAAE,OAAMW,EAAKrD,SAAW0C,CAAtB,EAA8C,aAC1CzD,KAAKyG,eAAc,gBAChBzG,KAAKM,UAAY,OAAS,KACzC2G,aAAc,WAAM,OAAA7C,EAAKD,aAAL,EACpB+C,aAAc,WAAM,OAAA9C,EAAK7B,aAAL,EACpB4E,QAAS,WAAM,OAAA/C,EAAKoC,6BAAL,EACfY,OAAQ,WAAM,OAAAhD,EAAK7B,aAAL,EACd8E,QAAS,WAAM,OAAAjD,EAAK7B,aAAL,GAEdvC,KAAK+C,MACJ6D,EAAA,QAAME,MAAM,MAAMlC,MAAO5E,KAAKsH,YAC3BC,OAAOC,cAAcC,SAAS,KAAA5F,OAAK7B,KAAK+C,SAG7C6D,EAAA,QAAME,MAAM,eACVF,EAAA,e,0ZApUO,I"}

package/dist/ripple/{p-f38332ed.system.entry.js → p-684f2c1e.system.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-e782194d.system.js"],(function(e){"use strict";var t,i,n,o,s;return{setters:[function(e){t=e.r;i=e.h;n=e.H;o=e.g},function(e){s=e.i}],execute:function(){var r="wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";var a=e("wm_modal_header",function(){function e(e){t(this,e);this.closeTooltipMessage=s.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.heading="";this.subheading=""}e.prototype.componentWillLoad=function(){var e=this;this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(function(){e.closeButtonEl.focus()}))};e.prototype.emitParentCloseEvent=function(){var e=this.el.parentElement;e.emitCloseEvent()};e.prototype.render=function(){var e=this;return i(n,null,i("div",{class:"wm-wrapper"},i("div",null,i("h2",{class:"title",id:"wm-modal-heading-text-".concat(this.uid)},this.heading,i("span",{class:"subtitle"},this.subheading))),i("wm-button",{"button-type":"navigational",icon:"f156",tooltip:this.closeTooltipMessage,"tooltip-position":"left",id:"wm-modal-close-".concat(this.uid),ref:function(t){return e.closeButtonEl=t},onClick:function(){return e.emitParentCloseEvent()}})))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());a.style=r}}}));
-//# sourceMappingURL=p-f38332ed.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f08e6a5a.system.js"],(function(e){"use strict";var t,i,n,o,s;return{setters:[function(e){t=e.r;i=e.h;n=e.H;o=e.g},function(e){s=e.i}],execute:function(){var r="wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";var a=e("wm_modal_header",function(){function e(e){t(this,e);this.closeTooltipMessage=s.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.heading="";this.subheading=""}e.prototype.componentWillLoad=function(){var e=this;this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(function(){e.closeButtonEl.focus()}))};e.prototype.emitParentCloseEvent=function(){var e=this.el.parentElement;e.emitCloseEvent()};e.prototype.render=function(){var e=this;return i(n,null,i("div",{class:"wm-wrapper"},i("div",null,i("h2",{class:"title",id:"wm-modal-heading-text-".concat(this.uid)},this.heading,i("span",{class:"subtitle"},this.subheading))),i("wm-button",{"button-type":"navigational",icon:"f156",tooltip:this.closeTooltipMessage,"tooltip-position":"left",id:"wm-modal-close-".concat(this.uid),ref:function(t){return e.closeButtonEl=t},onClick:function(){return e.emitParentCloseEvent()}})))};Object.defineProperty(e.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});return e}());a.style=r}}}));
+//# sourceMappingURL=p-684f2c1e.system.entry.js.map

package/dist/ripple/p-684f2c1e.system.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["wmModalHeaderCss","ModalHeader","exports","this","closeTooltipMessage","intl","formatMessage","id","defaultMessage","description","class_1","prototype","componentWillLoad","_this","uid","el","parentElement","addEventListener","closeButtonEl","focus","emitParentCloseEvent","parentModal","emitCloseEvent","render","h","Host","class","concat","heading","subheading","icon","tooltip","ref","onClick"],"sources":["src/components/wm-modal/wm-modal-header.scss?tag=wm-modal-header","src/components/wm-modal/wm-modal-header.tsx"],"sourcesContent":["wm-modal-header {\r\n @include border-radius(5px 5px 0 0px);\r\n //Fix for Chrome sometimes leaving space between header and content, making the overlay show through\r\n margin-bottom: -1px;\r\n\r\n .wm-wrapper {\r\n @include displayFlex();\r\n @include justifyContent(space-between);\r\n @include alignItems(center);\r\n\r\n .title {\r\n margin: 0;\r\n font-weight: 600;\r\n font-size: rem-calc(18);\r\n color: rgb(74, 74, 74);\r\n line-height: normal;\r\n\r\n .subtitle {\r\n display: block;\r\n font-size: rem-calc(14);\r\n font-weight: normal;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n }\r\n}\r\n","import { h, Component, Element, Prop, Host } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n tag: \"wm-modal-header\",\r\n styleUrl: \"wm-modal-header.scss\",\r\n})\r\nexport class ModalHeader {\r\n @Element() el!: HTMLElement;\r\n private closeButtonEl!: HTMLElement;\r\n\r\n @Prop() heading?: string = \"\";\r\n @Prop() subheading?: string = \"\";\r\n private uid!: string;\r\n\r\n private closeTooltipMessage: string = intl.formatMessage({\r\n id: \"global.closeVerb\",\r\n defaultMessage: \"Close\",\r\n description: \"For a button, to close a user interface element\",\r\n });\r\n\r\n componentWillLoad() {\r\n this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\r\n\r\n // Trap focus when user tabs past last element in modal\r\n // NB @Listen doesn't allow to listen on a specific element (the parent modal)\r\n // if we listen to the whole doc each modal on the page reacts to every event\r\n this.el.parentElement!.addEventListener(\"focusFirstElement\", () => {\r\n this.closeButtonEl.focus();\r\n });\r\n }\r\n\r\n emitParentCloseEvent() {\r\n const parentModal = this.el.parentElement;\r\n //@ts-ignore\r\n parentModal.emitCloseEvent();\r\n }\r\n\r\n // @Listen(\"click\")\r\n // directFocusOnClick() {\r\n // this.headingElement.tabIndex = 0;\r\n // this.headingElement.focus();\r\n // }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class=\"wm-wrapper\">\r\n <div>\r\n <h2\r\n class=\"title\"\r\n id={`wm-modal-heading-text-${this.uid}`}\r\n // ref={el => (this.headingElement = el as HTMLElement)}\r\n // onBlur={() => (this.headingElement.tabIndex = -1)}\r\n >\r\n {this.heading}\r\n <span class=\"subtitle\">{this.subheading}</span>\r\n </h2>\r\n </div>\r\n <wm-button\r\n button-type=\"navigational\"\r\n icon=\"f156\"\r\n tooltip={this.closeTooltipMessage}\r\n tooltip-position=\"left\"\r\n id={`wm-modal-close-${this.uid}`}\r\n ref={(el) => (this.closeButtonEl = el as HTMLElement)}\r\n onClick={() => this.emitParentCloseEvent()}\r\n />\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"wMAAA,IAAMA,EAAmB,ouB,ICOZC,EAAWC,EAAA,6B,wBAQdC,KAAAC,oBAA8BC,EAAKC,cAAc,CACvDC,GAAI,mBACJC,eAAgB,QAChBC,YAAa,oD,aAPY,G,gBACG,E,CAS9BC,EAAAC,UAAAC,kBAAA,eAAAC,EAAAV,KACEA,KAAKW,IAAOX,KAAKY,GAAGC,cAAqCF,IAKzDX,KAAKY,GAAGC,cAAeC,iBAAiB,qBAAqB,WAC3DJ,EAAKK,cAAcC,O,KAIvBT,EAAAC,UAAAS,qBAAA,WACE,IAAMC,EAAclB,KAAKY,GAAGC,cAE5BK,EAAYC,gB,EASdZ,EAAAC,UAAAY,OAAA,eAAAV,EAAAV,KACE,OACEqB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,WACEA,EAAA,MACEE,MAAM,QACNnB,GAAI,yBAAAoB,OAAyBxB,KAAKW,MAIjCX,KAAKyB,QACNJ,EAAA,QAAME,MAAM,YAAYvB,KAAK0B,cAGjCL,EAAA,2BACc,eACZM,KAAK,OACLC,QAAS5B,KAAKC,oBAAmB,mBAChB,OACjBG,GAAI,kBAAAoB,OAAkBxB,KAAKW,KAC3BkB,IAAK,SAACjB,GAAE,OAAMF,EAAKK,cAAgBH,CAA3B,EACRkB,QAAS,WAAM,OAAApB,EAAKO,sBAAL,K,uHA3DH,I"}

package/dist/ripple/{p-e61d2c52.entry.js → p-75c9cad6.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,h as o,H as e,g as i}from"./p-1c23de4a.js";import{i as r,m as s,n as l,o as n,p}from"./p-9fd3badc.js";const g=':host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f2fc";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';const h=class{constructor(o){t(this,o);this.tooltipMessage=r.formatMessage({id:"toggletip.moreInformation",defaultMessage:"More information"});this.label=undefined;this.tooltip=undefined;this.tooltipText=undefined;this.tooltipPosition="bottom-right";this.isOpen=false;this.isTabbing=false}get tempTooltip(){return this.tooltip||this.tooltipText}componentWillLoad(){const t=["top","right","bottom","left","top-right","top-left","bottom-right","bottom-left"];if(!this.label){console.error("wm-toggletip must have a label property")}if(!this.tempTooltip){console.error("wm-toggletip must have a tooltip property")}if(!t.includes(this.tooltipPosition)){console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${t}`)}if(this.tooltipText){console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.")}}handleKeydown(t){switch(t.key){case"Escape":t.preventDefault();if(this.isOpen){t.stopPropagation();this.close()}break;case"Tab":if(this.isOpen){this.close()}}}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleClick(t){if(this.isOpen){if(t.target===this.el||this.el.contains(t.target)){this.announceToggletip()}else{this.close()}}}open(){this.isOpen=true;this.announceToggletip()}close(){this.isOpen=false;this.hideTooltip()}handleBlur(){this.hideTooltip();this.liveRegionEl.innerHTML=""}showTooltip(){this.setToggletipPosition();this.tooltipEl.classList.add("hover")}hideTooltip(){this.tooltipEl.classList.remove("hover")}announceToggletip(){this.liveRegionEl.innerHTML="";setTimeout((()=>{this.liveRegionEl.innerHTML=this.tempTooltip}),10)}setToggletipPosition(){if(this.tooltipPosition.includes("bottom")&&s(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&l(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&n(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&p(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}}render(){return o(e,null,o("button",{class:`button ${this.isTabbing?"user-is-tabbing":""}`,type:"button","aria-label":this.label,onClick:()=>{this.setToggletipPosition();this.open()},onMouseEnter:()=>this.showTooltip(),onMouseLeave:()=>this.hideTooltip(),onFocus:()=>this.showTooltip(),onBlur:()=>this.handleBlur()}),o("div",{ref:t=>this.tooltipEl=t,class:`tooltip ${this.tooltipPosition} ${this.isOpen?"hidden":""}`,"aria-hidden":"true"},this.tooltipMessage),o("div",{ref:t=>this.toggletipEl=t,class:`toggletip ${this.isOpen?"":"hidden"} ${this.tooltipPosition}`},this.tempTooltip),o("div",{ref:t=>this.liveRegionEl=t,class:"live-region sr-only",role:"status","aria-live":"polite","aria-atomic":"true"}))}static get delegatesFocus(){return true}get el(){return i(this)}};h.style=g;export{h as wm_toggletip};
-//# sourceMappingURL=p-e61d2c52.entry.js.map
+import{r as t,h as o,H as e,g as i}from"./p-1c23de4a.js";import{i as r,m as s,n as l,o as n,p}from"./p-edfba0e1.js";const g=':host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f2fc";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}';const h=class{constructor(o){t(this,o);this.tooltipMessage=r.formatMessage({id:"toggletip.moreInformation",defaultMessage:"More information"});this.label=undefined;this.tooltip=undefined;this.tooltipText=undefined;this.tooltipPosition="bottom-right";this.isOpen=false;this.isTabbing=false}get tempTooltip(){return this.tooltip||this.tooltipText}componentWillLoad(){const t=["top","right","bottom","left","top-right","top-left","bottom-right","bottom-left"];if(!this.label){console.error("wm-toggletip must have a label property")}if(!this.tempTooltip){console.error("wm-toggletip must have a tooltip property")}if(!t.includes(this.tooltipPosition)){console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${t}`)}if(this.tooltipText){console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.")}}handleKeydown(t){switch(t.key){case"Escape":t.preventDefault();if(this.isOpen){t.stopPropagation();this.close()}break;case"Tab":if(this.isOpen){this.close()}}}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleClick(t){if(this.isOpen){if(t.target===this.el||this.el.contains(t.target)){this.announceToggletip()}else{this.close()}}}open(){this.isOpen=true;this.announceToggletip()}close(){this.isOpen=false;this.hideTooltip()}handleBlur(){this.hideTooltip();this.liveRegionEl.innerHTML=""}showTooltip(){this.setToggletipPosition();this.tooltipEl.classList.add("hover")}hideTooltip(){this.tooltipEl.classList.remove("hover")}announceToggletip(){this.liveRegionEl.innerHTML="";setTimeout((()=>{this.liveRegionEl.innerHTML=this.tempTooltip}),10)}setToggletipPosition(){if(this.tooltipPosition.includes("bottom")&&s(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&l(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&n(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&p(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}}render(){return o(e,null,o("button",{class:`button ${this.isTabbing?"user-is-tabbing":""}`,type:"button","aria-label":this.label,onClick:()=>{this.setToggletipPosition();this.open()},onMouseEnter:()=>this.showTooltip(),onMouseLeave:()=>this.hideTooltip(),onFocus:()=>this.showTooltip(),onBlur:()=>this.handleBlur()}),o("div",{ref:t=>this.tooltipEl=t,class:`tooltip ${this.tooltipPosition} ${this.isOpen?"hidden":""}`,"aria-hidden":"true"},this.tooltipMessage),o("div",{ref:t=>this.toggletipEl=t,class:`toggletip ${this.isOpen?"":"hidden"} ${this.tooltipPosition}`},this.tempTooltip),o("div",{ref:t=>this.liveRegionEl=t,class:"live-region sr-only",role:"status","aria-live":"polite","aria-atomic":"true"}))}static get delegatesFocus(){return true}get el(){return i(this)}};h.style=g;export{h as wm_toggletip};
+//# sourceMappingURL=p-75c9cad6.entry.js.map

package/dist/ripple/p-75c9cad6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["wmToggletipCss","Toggletip","this","tooltipMessage","intl","formatMessage","id","defaultMessage","tempTooltip","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","includes","tooltipPosition","warn","handleKeydown","ev","key","preventDefault","isOpen","stopPropagation","close","toggleTabbingOn","isTabbing","toggleTabbingOff","handleClick","target","el","contains","announceToggletip","open","hideTooltip","handleBlur","liveRegionEl","innerHTML","showTooltip","setToggletipPosition","tooltipEl","classList","add","remove","setTimeout","shouldOpenUp","toggletipEl","replace","shouldOpenDown","shouldShiftRight","shouldShiftLeft","render","h","Host","class","type","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","role"],"sources":["./src/components/wm-toggletip/wm-toggletip.scss?tag=wm-toggletip&encapsulation=shadow","./src/components/wm-toggletip/wm-toggletip.tsx"],"sourcesContent":["@mixin toggletipTriangleBase() {\r\n content: \"\";\r\n position: absolute;\r\n border: solid transparent;\r\n height: 0;\r\n width: 0;\r\n pointer-events: none;\r\n}\r\n@mixin toggletipTriangleTop() {\r\n @include toggletipTriangleBase();\r\n bottom: 100%;\r\n border-bottom-color: $charcoal;\r\n border-bottom-width: rem-calc(4);\r\n border-left-width: rem-calc(6);\r\n border-right-width: rem-calc(6);\r\n margin-left: rem-calc(-6);\r\n left: 50%;\r\n}\r\n@mixin toggletipTriangleBottom() {\r\n @include toggletipTriangleBase();\r\n top: 100%;\r\n border-top-color: $charcoal;\r\n border-top-width: rem-calc(4);\r\n border-left-width: rem-calc(6);\r\n border-right-width: rem-calc(6);\r\n margin-left: rem-calc(-6);\r\n left: 50%;\r\n}\r\n@mixin toggletipTriangleLeft() {\r\n @include toggletipTriangleBase();\r\n bottom: 100%;\r\n border-right-color: $charcoal;\r\n border-right-width: rem-calc(4);\r\n border-top-width: rem-calc(6);\r\n border-bottom-width: rem-calc(6);\r\n border-left-width: 0px;\r\n top: calc(50% - 6px);\r\n left: rem-calc(-3);\r\n}\r\n@mixin toggletipTriangleRight() {\r\n @include toggletipTriangleBase();\r\n bottom: 100%;\r\n border-left-color: $charcoal;\r\n border-left-width: rem-calc(4);\r\n border-top-width: rem-calc(6);\r\n border-bottom-width: rem-calc(6);\r\n border-right-width: 0px;\r\n top: calc(50% - 6px);\r\n right: rem-calc(-3);\r\n}\r\n@mixin toggletipTriangleTopLeft() {\r\n @include toggletipTriangleTop();\r\n margin-left: unset;\r\n left: rem-calc(14);\r\n}\r\n@mixin toggletipTriangleTopRight() {\r\n @include toggletipTriangleTop();\r\n left: unset;\r\n margin-left: unset;\r\n right: rem-calc(14);\r\n}\r\n@mixin toggletipTriangleBottomLeft() {\r\n @include toggletipTriangleBottom();\r\n margin-left: unset;\r\n left: rem-calc(14);\r\n}\r\n@mixin toggletipTriangleBottomRight() {\r\n @include toggletipTriangleBottom();\r\n left: unset;\r\n margin-left: unset;\r\n right: rem-calc(14);\r\n}\r\n\r\n:host,\r\nwm-toggletip {\r\n display: inline-block;\r\n position: relative;\r\n height: 40px;\r\n width: 40px;\r\n\r\n .button {\r\n display: flex;\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n width: inherit;\r\n height: inherit;\r\n border-radius: 50%;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n cursor: pointer;\r\n &:before {\r\n @include mdi-icon;\r\n content: \"\\f2fc\";\r\n font-size: 16px;\r\n color: $charcoal;\r\n background: radial-gradient(white 40%, transparent 0%); // adds white \"font-color\" to icon\r\n }\r\n &:focus {\r\n outline: none;\r\n &.user-is-tabbing {\r\n @include focus-style;\r\n }\r\n }\r\n }\r\n\r\n .tooltip {\r\n position: absolute;\r\n opacity: 0;\r\n width: 1px;\r\n height: 1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n pointer-events: none;\r\n\r\n font-family: inherit;\r\n font-size: rem-calc(14);\r\n text-transform: none;\r\n font-weight: normal;\r\n background: black;\r\n color: #fff;\r\n padding: rem-calc(6);\r\n line-height: normal;\r\n z-index: 30;\r\n white-space: nowrap;\r\n\r\n &.hover {\r\n clip: auto;\r\n width: auto;\r\n height: auto;\r\n opacity: 1;\r\n transition: opacity 500ms 500ms;\r\n padding: rem-calc(6);\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n .toggletip {\r\n position: absolute;\r\n max-width: rem-calc(220);\r\n width: max-content;\r\n padding: rem-calc(8) rem-calc(12);\r\n border-radius: rem-calc(3);\r\n background: $charcoal;\r\n color: white;\r\n font-size: 14px;\r\n z-index: 30;\r\n\r\n &.top {\r\n &:before {\r\n @include toggletipTriangleBottom();\r\n }\r\n }\r\n\r\n &.bottom {\r\n &:before {\r\n @include toggletipTriangleTop();\r\n }\r\n }\r\n\r\n &.right {\r\n &:before {\r\n @include toggletipTriangleLeft();\r\n }\r\n }\r\n\r\n &.left {\r\n &:before {\r\n @include toggletipTriangleRight();\r\n }\r\n }\r\n\r\n &.bottom-right {\r\n &:before {\r\n @include toggletipTriangleTopLeft();\r\n }\r\n }\r\n\r\n &.bottom-left {\r\n &:before {\r\n @include toggletipTriangleTopRight();\r\n }\r\n }\r\n\r\n &.top-right {\r\n &:before {\r\n @include toggletipTriangleBottomLeft();\r\n }\r\n }\r\n\r\n &.top-left {\r\n &:before {\r\n @include toggletipTriangleBottomRight();\r\n }\r\n }\r\n\r\n &.hidden {\r\n transform: scale(0, 0) !important; // ensure el doesn't take space on screen when hidden\r\n visibility: hidden;\r\n }\r\n }\r\n\r\n .toggletip,\r\n .tooltip {\r\n &.top {\r\n transform: translate(-50%, 0%);\r\n bottom: 40px;\r\n left: 20px;\r\n }\r\n\r\n &.bottom {\r\n transform: translate(-50%, 0%);\r\n top: 40px;\r\n left: 20px;\r\n }\r\n\r\n &.right {\r\n transform: translate(100%, calc(-50% - 20px));\r\n right: 0px;\r\n }\r\n\r\n &.left {\r\n transform: translate(-100%, calc(-50% - 20px));\r\n left: 0px;\r\n }\r\n\r\n &.bottom-right {\r\n top: 40px;\r\n left: 0px;\r\n }\r\n\r\n &.bottom-left {\r\n top: 40px;\r\n right: 0px;\r\n }\r\n\r\n &.top-right {\r\n bottom: 40px;\r\n left: 0px;\r\n }\r\n\r\n &.top-left {\r\n bottom: 40px;\r\n right: 0px;\r\n }\r\n }\r\n\r\n .sr-only {\r\n @include srOnly;\r\n }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\r\n\r\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\r\nimport { TooltipPlacement } from \"../../global/interfaces\";\r\n@Component({\r\n tag: \"wm-toggletip\",\r\n styleUrl: \"wm-toggletip.scss\",\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class Toggletip {\r\n @Element() el!: HTMLWmToggletipElement;\r\n\r\n @Prop() label?: string;\r\n @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\r\n @Prop() tooltipText?: string; // DEPRECATED\r\n get tempTooltip() {\r\n // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\r\n return this.tooltip || this.tooltipText;\r\n }\r\n @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\r\n @State() isOpen: boolean = false;\r\n @State() isTabbing: boolean = false;\r\n\r\n private toggletipEl!: HTMLDivElement;\r\n private tooltipEl!: HTMLDivElement;\r\n private liveRegionEl!: HTMLDivElement;\r\n private tooltipMessage = intl.formatMessage({\r\n id: \"toggletip.moreInformation\",\r\n defaultMessage: \"More information\",\r\n });\r\n\r\n componentWillLoad() {\r\n const validTooltipPlacement = [\r\n \"top\",\r\n \"right\",\r\n \"bottom\",\r\n \"left\",\r\n \"top-right\",\r\n \"top-left\",\r\n \"bottom-right\",\r\n \"bottom-left\",\r\n ];\r\n\r\n if (!this.label) {\r\n console.error(\"wm-toggletip must have a label property\");\r\n }\r\n if (!this.tempTooltip) {\r\n console.error(\"wm-toggletip must have a tooltip property\");\r\n }\r\n if (!validTooltipPlacement.includes(this.tooltipPosition)) {\r\n console.error(\r\n `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\r\n );\r\n }\r\n if (this.tooltipText) {\r\n console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\r\n }\r\n }\r\n\r\n @Listen(\"keydown\")\r\n handleKeydown(ev: KeyboardEvent) {\r\n switch (ev.key) {\r\n case \"Escape\":\r\n ev.preventDefault();\r\n if (this.isOpen) {\r\n ev.stopPropagation(); // prevent closing modal if within one\r\n this.close();\r\n }\r\n break;\r\n case \"Tab\":\r\n if (this.isOpen) {\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n toggleTabbingOn() {\r\n this.isTabbing = true;\r\n }\r\n\r\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n toggleTabbingOff() {\r\n this.isTabbing = false;\r\n }\r\n\r\n @Listen(\"click\", { target: \"document\" })\r\n handleClick(ev: MouseEvent) {\r\n if (this.isOpen) {\r\n if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\r\n // Re-announce if clicking any part of the component while open\r\n this.announceToggletip();\r\n } else {\r\n this.close();\r\n }\r\n }\r\n }\r\n\r\n open() {\r\n this.isOpen = true;\r\n this.announceToggletip();\r\n }\r\n\r\n close() {\r\n this.isOpen = false;\r\n this.hideTooltip();\r\n }\r\n\r\n handleBlur() {\r\n this.hideTooltip();\r\n // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\r\n this.liveRegionEl.innerHTML = \"\";\r\n }\r\n\r\n showTooltip() {\r\n // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\r\n // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\r\n this.setToggletipPosition();\r\n this.tooltipEl.classList.add(\"hover\");\r\n }\r\n\r\n hideTooltip() {\r\n this.tooltipEl.classList.remove(\"hover\");\r\n }\r\n\r\n announceToggletip() {\r\n this.liveRegionEl.innerHTML = \"\";\r\n setTimeout(() => {\r\n this.liveRegionEl.innerHTML = this.tempTooltip!;\r\n }, 10);\r\n }\r\n\r\n setToggletipPosition() {\r\n // Vertical\r\n if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\r\n this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\r\n } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\r\n this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\r\n }\r\n\r\n // Horizontal\r\n if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\r\n this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\r\n } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\r\n this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <button\r\n class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n type=\"button\"\r\n aria-label={this.label}\r\n onClick={() => {\r\n this.setToggletipPosition();\r\n this.open();\r\n }}\r\n // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\r\n onMouseEnter={() => this.showTooltip()}\r\n onMouseLeave={() => this.hideTooltip()}\r\n onFocus={() => this.showTooltip()}\r\n onBlur={() => this.handleBlur()}\r\n ></button>\r\n <div\r\n ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\r\n class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\r\n aria-hidden=\"true\"\r\n >\r\n {this.tooltipMessage}\r\n </div>\r\n <div\r\n ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\r\n class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\r\n >\r\n {this.tempTooltip}\r\n </div>\r\n <div\r\n ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n class=\"live-region sr-only\"\r\n role=\"status\"\r\n // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\r\n aria-live=\"polite\"\r\n aria-atomic=\"true\"\r\n ></div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"mappings":"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"}