@aquera/nile-elements 1.3.9-beta-1.2 → 1.3.9-beta-1.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.
- package/demo/index.html +5 -2
- package/dist/index.js +8 -4
- package/dist/nile-skeleton-loader/nile-skeleton-loader.cjs.js +1 -1
- package/dist/nile-skeleton-loader/nile-skeleton-loader.cjs.js.map +1 -1
- package/dist/nile-skeleton-loader/nile-skeleton-loader.css.cjs.js +1 -1
- package/dist/nile-skeleton-loader/nile-skeleton-loader.css.cjs.js.map +1 -1
- package/dist/nile-skeleton-loader/nile-skeleton-loader.css.esm.js +6 -2
- package/dist/nile-skeleton-loader/nile-skeleton-loader.esm.js +1 -1
- package/dist/src/nile-skeleton-loader/nile-skeleton-loader.css.js +6 -2
- package/dist/src/nile-skeleton-loader/nile-skeleton-loader.css.js.map +1 -1
- package/dist/src/nile-skeleton-loader/nile-skeleton-loader.js +1 -4
- package/dist/src/nile-skeleton-loader/nile-skeleton-loader.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-skeleton-loader/nile-skeleton-loader.css.ts +6 -2
- package/src/nile-skeleton-loader/nile-skeleton-loader.ts +1 -4
package/demo/index.html
CHANGED
|
@@ -19,10 +19,13 @@
|
|
|
19
19
|
<body>
|
|
20
20
|
|
|
21
21
|
<div class="container">
|
|
22
|
-
<nile-skeleton-loader variant="text" width="210" height="60"></nile-skeleton-loader>
|
|
22
|
+
<!-- <nile-skeleton-loader variant="text" width="210" height="60"></nile-skeleton-loader>
|
|
23
23
|
<nile-skeleton-loader variant="circular" width="40" height="40"></nile-skeleton-loader>
|
|
24
24
|
<nile-skeleton-loader variant="rectangular" height="20"></nile-skeleton-loader>
|
|
25
|
-
<nile-skeleton-loader variant="rounded" width="210" height="20"></nile-skeleton-loader>
|
|
25
|
+
<nile-skeleton-loader variant="rounded" width="210" height="20"></nile-skeleton-loader> -->
|
|
26
|
+
|
|
27
|
+
<nile-skeleton-loader variant="rectangular" ></nile-skeleton-loader>
|
|
28
|
+
<!-- <nile-skeleton-loader variant="rounded" height="20"></nile-skeleton-loader> -->
|
|
26
29
|
</div>
|
|
27
30
|
</body>
|
|
28
31
|
</html>
|
package/dist/index.js
CHANGED
|
@@ -3575,11 +3575,15 @@ const de=1,he=2,Te=3,ye=4,Ae=e=>(...t)=>({_$litDirective$:e,values:t});let Oe=cl
|
|
|
3575
3575
|
-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
|
|
3576
3576
|
-moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
|
|
3577
3577
|
text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
|
|
3578
|
-
|
|
3578
|
+
box-sizing: border-box;
|
|
3579
|
+
display: block;
|
|
3580
|
+
width: 100%;
|
|
3579
3581
|
}
|
|
3580
3582
|
|
|
3581
3583
|
.skeleton-loader {
|
|
3582
|
-
display:
|
|
3584
|
+
display: flex;
|
|
3585
|
+
justify-content: center;
|
|
3586
|
+
align-items: center;
|
|
3583
3587
|
width: 100%;
|
|
3584
3588
|
}
|
|
3585
3589
|
|
|
@@ -3616,7 +3620,7 @@ const de=1,he=2,Te=3,ye=4,Ae=e=>(...t)=>({_$litDirective$:e,values:t});let Oe=cl
|
|
|
3616
3620
|
opacity: 1;
|
|
3617
3621
|
}
|
|
3618
3622
|
}
|
|
3619
|
-
`;let uM=class extends Re{constructor(){super(...arguments),this.variant="text",this.width="",this.height="",this.borderRadius=""}static get styles(){return[gM]}formatDimension(e){if(!e)return"";if("number"==typeof e)return`${e}px`;const t=String(e).trim();return/^\d+(\.\d+)?$/.test(t)?`${t}px`:t}getComputedWidth(){const e=this.formatDimension(this.width);return e||("circular"===this.variant?"40px":"100%")}getComputedHeight(){const e=this.formatDimension(this.height);return e||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px")}getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))"}render(){return R`
|
|
3623
|
+
`;let uM=class extends Re{constructor(){super(...arguments),this.variant="text",this.width="",this.height="",this.borderRadius=""}static get styles(){return[gM]}formatDimension(e){if(!e)return"";if("number"==typeof e)return`${e}px`;const t=String(e).trim();return/^\d+(\.\d+)?$/.test(t)?`${t}px`:t}getComputedWidth(){const e=this.formatDimension(this.width);return e||("circular"===this.variant?"40px":"calc(100% - 20px)")}getComputedHeight(){const e=this.formatDimension(this.height);return e||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px")}getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))"}render(){return R`
|
|
3620
3624
|
<div
|
|
3621
3625
|
part="base"
|
|
3622
3626
|
class="skeleton-loader"
|
|
@@ -14823,7 +14827,7 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
|
|
|
14823
14827
|
|
|
14824
14828
|
|
|
14825
14829
|
|
|
14826
|
-
`,_S={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};let FS=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),US(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(e.shiftKey){if(i.collapsed&&i.startContainer.nodeType===Node.TEXT_NODE){const e=i.startContainer,M=i.startOffset,n=e.data.slice(0,M),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){e.data=o+e.data.slice(M);const i=document.createRange();i.setStart(e,o.length),i.collapse(!0),t.removeAllRanges(),t.addRange(i),this.updateContent(),this.updateToolbarState()}}return}i.deleteContents();const M=document.createTextNode("\t");i.insertNode(M);const n=document.createRange();n.setStartAfter(M),n.collapse(!0),t.removeAllRanges(),t.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(GS.cssText),this.ensureStructure(),this.placeholder&&this.editorEl&&(this.editorEl.dataset.placeholder=this.placeholder),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),document.addEventListener("selectionchange",this.onSelectionChange,{passive:!0}),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("value")&&this.editorEl&&this.value!==this.editorEl.innerHTML&&(this.editorEl.innerHTML=this.value||"<p><br></p>",this.content=this.editorEl.innerHTML,this.syncPreview()),e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.placeholder&&(this.editorEl.dataset.placeholder=this.placeholder),this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const i=e.parentNode;if(!i)return;const M=t?(e.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(M);i.insertBefore(n,e),i.removeChild(e);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,i=t.getAttribute("data-mention-key"),M=t.getAttribute("data-mention-label"),n=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),r=!!i&&!!M&&o.length>0&&o.startsWith(n)&&o.includes(M);o&&r||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent(),this.updateToolbarState()})),this.editorEl.addEventListener("mouseup",(()=>{this.saveSelection(),this.updateToolbarState()})),this.editorEl.addEventListener("keyup",(e=>{this.saveSelection(),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)&&this.updateToolbarState()})),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const i=e.getAttribute("name")||"",M=e.getAttribute("label")||i,n=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),n)t.innerHTML=`<nile-icon name="${n}" aria-label="${M}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const n=_S[i];n?t.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${M}"></nile-icon>`:t.textContent=M||i,e.innerHTML=""}if(!t.isConnected){const i=document.createElement("nile-tooltip");i.setAttribute("content",M),i.appendChild(t),e.appendChild(i)}t.setAttribute("aria-label",M),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(i)));const r=this.buttonMap.get(i)??[];return r.push(t),void this.buttonMap.set(i,r)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:i}=e.detail;"backColor"===t?WS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){WS(e,"color",t,"data-rte-color")}(this.editorEl,i),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const i=e.detail;"heading"===t?function(e,t){const i=document.getSelection();if(!i||0===i.rangeCount)return;const M=fS(i.getRangeAt(0).startContainer,e);if(!M)return;if(M.tagName.toLowerCase()===t)return;const n=document.createElement(t);for(;M.firstChild;)n.appendChild(M.firstChild);M.replaceWith(n);const o=document.createRange();o.selectNodeContents(n),o.collapse(!0),i.removeAllRanges(),i.addRange(o)}(this.editorEl,i):"font"===t&&ZS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;vS(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}getCleanContent(){const e=this.editorEl.cloneNode(!0);return e.querySelectorAll("*").forEach((e=>{e.removeAttribute("style")})),e.innerHTML}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),i=this.lastRange.extractContents(),M=document.createElement("div");M.appendChild(i),Array.from(M.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const i=document.createElement("li");i.appendChild(e),t.appendChild(i)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":US(this.editorEl,"strong");break;case"italic":US(this.editorEl,"em");break;case"underline":US(this.editorEl,"u");break;case"left":vS(this.editorEl,"left");break;case"center":vS(this.editorEl,"center");break;case"right":vS(this.editorEl,"right");break;case"justify":vS(this.editorEl,"justify");break;case"ul":BS(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":BS(this.editorEl,"ol"),this.updateContent(),this.updateToolbarState();break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const i=e.currentNode;i.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(i.tagName)&&t.push(i)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const i=this.buttonMap.get(e);if(i)for(const e of i)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const i=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,M=getComputedStyle(i),n=fS(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const i=getComputedStyle(e).fontWeight;if(parseInt(i,10)>=600)return!0}e=e.parentNode}return!1})(),r=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),a=!!i.closest("a"),l=n.style.textAlign||getComputedStyle(n).textAlign||"start",N="start"===l?"left":l,g=!!i.closest("li")&&i.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",s),this.setBtnActive("link",a),this.setBtnActive("left","left"===N&&!["center","right","justify"].includes(N)),this.setBtnActive("center","center"===N),this.setBtnActive("right","right"===N),this.setBtnActive("justify","justify"===N),this.setBtnActive("ul","ul"===g),this.setBtnActive("ol","ol"===g),this.headingSelect){const e=n.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(M.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=YS(M.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(i).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=YS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=""===(this.editorEl.textContent??"").trim();this.editorEl.classList.toggle("empty",e);const t=this.editorEl.cloneNode(!0);if(this.noStyles)t.querySelectorAll("[style]").forEach((e=>e.removeAttribute("style")));else{const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),M=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align","list-style-position","padding-inline-start"];for(;e.nextNode()&&i.nextNode();){const t=e.currentNode,n=i.currentNode,o=window.getComputedStyle(t),r=M.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");r.trim()&&n.setAttribute("style",r)}}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ce({type:String,attribute:!0,reflect:!0})],FS.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],FS.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],FS.prototype,"singleLineEditor",void 0),e([ce({type:String})],FS.prototype,"placeholder",void 0),e([ce({attribute:"mentions",reflect:!0,converter:{fromAttribute:e=>{try{const t=JSON.parse(e),i={};for(const e of Object.keys(t)){const M=t[e];Array.isArray(M)&&(i[e]=M.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return i}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],FS.prototype,"mentions",void 0),e([De()],FS.prototype,"content",void 0),FS=e([Ne("nile-rich-text-editor")],FS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.3.9-beta-1.2"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const HS=r`
|
|
14830
|
+
`,_S={bold:"format_bold",italic:"format_italic",underline:"format_underline",link:"link_2",left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify",ul:"format_list_bulleted",ol:"format_list_numbered",clear:"format_clear"};let FS=class extends ae{constructor(){super(...arguments),this.value="",this.noStyles=!1,this.singleLineEditor=!1,this.placeholder="",this.mentions={},this.content="",this.previewEl=null,this.toolbarEl=null,this.lastRange=null,this.buttonMap=new Map,this.headingSelect=null,this.fontSelect=null,this.colorInput=null,this.bgColorInput=null,this.colorSwatchEl=null,this.bgSwatchEl=null,this.containerEl=null,this.mentionsEl=null,this.onEditorKeydown=e=>{if(this.singleLineEditor&&"Enter"===e.key&&e.shiftKey)return void e.preventDefault();if(e.ctrlKey&&"i"===e.key.toLowerCase()&&(e.preventDefault(),US(this.editorEl,"em"),this.updateContent(),this.updateToolbarState()),this.singleLineEditor&&"Enter"===e.key)return void e.preventDefault();if("Tab"!==e.key)return;e.preventDefault(),this.focusAndRestore();const t=window.getSelection();if(!t||0===t.rangeCount)return;const i=t.getRangeAt(0);if(e.shiftKey){if(i.collapsed&&i.startContainer.nodeType===Node.TEXT_NODE){const e=i.startContainer,M=i.startOffset,n=e.data.slice(0,M),o=n.replace(/(\t|[ \u00a0]{2})$/,"");if(o.length!==n.length){e.data=o+e.data.slice(M);const i=document.createRange();i.setStart(e,o.length),i.collapse(!0),t.removeAllRanges(),t.addRange(i),this.updateContent(),this.updateToolbarState()}}return}i.deleteContents();const M=document.createTextNode("\t");i.insertNode(M);const n=document.createRange();n.setStartAfter(M),n.collapse(!0),t.removeAllRanges(),t.addRange(n),this.updateContent(),this.updateToolbarState()},this.onSelectionChange=()=>{if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);this.editorEl.contains(t.commonAncestorContainer)&&(this.lastRange=t.cloneRange(),this.updateToolbarState())}}createRenderRoot(){return this}injectCss(e){if(this.querySelector("style[data-rte-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-style","true"),t.textContent=e,this.insertBefore(t,this.firstChild)}connectedCallback(){super.connectedCallback(),this.injectCss(GS.cssText),this.ensureStructure(),this.placeholder&&this.editorEl&&(this.editorEl.dataset.placeholder=this.placeholder),this.value&&!this.editorEl.innerHTML.trim()&&(this.editorEl.innerHTML=this.value),this.content=this.editorEl.innerHTML,this.toolbarEl&&this.wireAuthoredToolbar(this.toolbarEl),this.mentionsEl=this.querySelector("nile-rte-mentions"),this.mentionsEl&&(this.mentionsEl.attach?.(this.editorEl,this),this.mentionsEl.setExternalConfig?.(this.mentions)),this.wireEditor(),document.addEventListener("selectionchange",this.onSelectionChange,{passive:!0}),this.updateToolbarState(),this.syncPreview()}ensureStructure(){this.toolbarEl=this.querySelector("nile-rte-toolbar"),this.previewEl=this.querySelector("nile-rte-preview"),this.containerEl=this.querySelector(".rte-container"),this.containerEl||(this.containerEl=document.createElement("div"),this.containerEl.className="rte-container",this.appendChild(this.containerEl)),this.ensureEditor(),this.toolbarEl&&this.toolbarEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.toolbarEl),this.editorEl.parentElement!==this.containerEl&&this.containerEl.appendChild(this.editorEl),this.previewEl&&(this.previewEl.parentElement!==this&&this.appendChild(this.previewEl),this.previewEl.previousElementSibling!==this.containerEl&&this.insertBefore(this.previewEl,this.containerEl.nextSibling))}updateContentWithMention(e){this.updateContent(),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content,mention:e},bubbles:!0,composed:!0}))}disconnectedCallback(){document.removeEventListener("selectionchange",this.onSelectionChange),this.mentionsEl&&this.mentionsEl.detach&&this.mentionsEl.detach(),super.disconnectedCallback()}updated(e){e.has("value")&&this.editorEl&&this.value!==this.editorEl.innerHTML&&(this.editorEl.innerHTML=this.value||"<p><br></p>",this.content=this.editorEl.innerHTML,this.syncPreview()),e.has("singleLineEditor")&&(this.editorEl&&this.editorEl.classList.toggle("single-line",this.singleLineEditor),this.previewEl&&this.previewEl.classList.toggle("single-line",this.singleLineEditor))}ensureEditor(){if(this.editorEl=this.querySelector(".editor"),!this.editorEl){const e=document.createElement("article");e.className="editor",e.setAttribute("contenteditable","true"),this.editorEl=e}this.placeholder&&(this.editorEl.dataset.placeholder=this.placeholder),this.editorEl.innerHTML.trim()||(this.editorEl.innerHTML="<p><br></p>")}unwrapMention(e,t=!0){const i=e.parentNode;if(!i)return;const M=t?(e.textContent??"").replace(/\u200B/g,""):"",n=document.createTextNode(M);i.insertBefore(n,e),i.removeChild(e);const o=document.createRange();o.setStartAfter(n),o.collapse(!0);const r=window.getSelection();r?.removeAllRanges(),r?.addRange(o)}scrubBrokenMentions(){if(!this.editorEl)return;this.editorEl.querySelectorAll("span.mention").forEach((e=>{const t=e,i=t.getAttribute("data-mention-key"),M=t.getAttribute("data-mention-label"),n=t.getAttribute("data-mention-trigger")||"",o=(t.textContent??"").replace(/\u200B/g,"").trim(),r=!!i&&!!M&&o.length>0&&o.startsWith(n)&&o.includes(M);o&&r||this.unwrapMention(t,!0)}))}wireEditor(){this.editorEl.addEventListener("input",(()=>{this.ensureAtLeastOneParagraph(),this.scrubBrokenMentions(),this.updateContent(),this.updateToolbarState()})),this.editorEl.addEventListener("mouseup",(()=>{this.saveSelection(),this.updateToolbarState()})),this.editorEl.addEventListener("keyup",(e=>{this.saveSelection(),["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)&&this.updateToolbarState()})),this.editorEl.addEventListener("keydown",this.onEditorKeydown)}wireAuthoredToolbar(e){this.buttonMap.clear(),this.headingSelect=null,this.fontSelect=null,this.colorInput=null,Array.from(e.children).forEach((e=>{const t=e.tagName.toLowerCase();if("nile-rte-select"!==t||"align"!==e.getAttribute("type")){if("nile-rte-link"===t)return e.editorEl=this.editorEl,void e.addEventListener("link-changed",(()=>{this.updateContent(),this.updateToolbarState()}));if("nile-rte-toolbar-item"===t){let t=e.querySelector(":scope > nile-button");const i=e.getAttribute("name")||"",M=e.getAttribute("label")||i,n=e.getAttribute("icon"),o=e.innerHTML.trim().length>0;if(t||(t=document.createElement("nile-button"),t.variant="tertiary",t.size="small"),n)t.innerHTML=`<nile-icon name="${n}" aria-label="${M}"></nile-icon>`,e.innerHTML="";else if(o)t.innerHTML=e.innerHTML,e.innerHTML="";else{const n=_S[i];n?t.innerHTML=`<nile-icon name="${n}" size="20" color="black" aria-label="${M}"></nile-icon>`:t.textContent=M||i,e.innerHTML=""}if(!t.isConnected){const i=document.createElement("nile-tooltip");i.setAttribute("content",M),i.appendChild(t),e.appendChild(i)}t.setAttribute("aria-label",M),t.addEventListener("mousedown",(e=>e.preventDefault())),t.addEventListener("click",(()=>this.onToolbarCommand(i)));const r=this.buttonMap.get(i)??[];return r.push(t),void this.buttonMap.set(i,r)}if("nile-rte-select"!==t)"nile-rte-color"!==t||e.addEventListener("change",(e=>{this.focusAndRestore();const{mode:t,value:i}=e.detail;"backColor"===t?WS(this.editorEl,"backgroundColor",i,"data-rte-bg"):function(e,t){WS(e,"color",t,"data-rte-color")}(this.editorEl,i),this.updateContent(),this.updateToolbarState()}));else{const t=e.getAttribute("type")||"";e.addEventListener("change",(e=>{this.focusAndRestore();const i=e.detail;"heading"===t?function(e,t){const i=document.getSelection();if(!i||0===i.rangeCount)return;const M=fS(i.getRangeAt(0).startContainer,e);if(!M)return;if(M.tagName.toLowerCase()===t)return;const n=document.createElement(t);for(;M.firstChild;)n.appendChild(M.firstChild);M.replaceWith(n);const o=document.createRange();o.selectNodeContents(n),o.collapse(!0),i.removeAllRanges(),i.addRange(o)}(this.editorEl,i):"font"===t&&ZS(this.editorEl,i),this.updateContent(),this.updateToolbarState()}))}}else e.addEventListener("change",(e=>{this.focusAndRestore();const t=e.detail;vS(this.editorEl,t),this.updateContent(),this.updateToolbarState()}))}))}saveSelection(){const e=window.getSelection();e&&e.rangeCount&&(this.lastRange=e.getRangeAt(0).cloneRange())}restoreSelection(){if(!this.lastRange)return;const e=document.getSelection();e&&(e.removeAllRanges(),e.addRange(this.lastRange))}focusAndRestore(){this.editorEl?.focus(),this.restoreSelection()}getCleanContent(){const e=this.editorEl.cloneNode(!0);return e.querySelectorAll("*").forEach((e=>{e.removeAttribute("style")})),e.innerHTML}insertList(e){if(this.restoreSelection(),!this.lastRange)return;const t=document.createElement(e),i=this.lastRange.extractContents(),M=document.createElement("div");M.appendChild(i),Array.from(M.childNodes).forEach((e=>{if(e.nodeType===Node.TEXT_NODE&&!e.textContent?.trim())return;const i=document.createElement("li");i.appendChild(e),t.appendChild(i)})),this.lastRange.insertNode(t),this.afterListEdit(t)}afterListEdit(e){const t=document.createRange();t.setStartAfter(e),t.collapse(!0);const i=window.getSelection();i?.removeAllRanges(),i?.addRange(t),this.saveSelection(),this.updateContent(),this.updateToolbarState()}ensureAtLeastOneParagraph(){const e=this.editorEl;if(!e)return;const t=""===(e.textContent??"").replace(/\u200B/g,"").trim();if(0===e.childNodes.length||t)return void(e.innerHTML="<p><br></p>");if(!e.querySelector("p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre")){const t=document.createElement("p");for(;e.firstChild;)t.appendChild(e.firstChild);return t.hasChildNodes()||t.appendChild(document.createElement("br")),void e.appendChild(t)}e.querySelectorAll("p").forEach((e=>{""===(e.textContent??"").replace(/\u200B/g,"")&&(e.innerHTML.toLowerCase().includes("<br")||(e.innerHTML="<br>"))}))}onToolbarCommand(e){switch(this.focusAndRestore(),e){case"bold":US(this.editorEl,"strong");break;case"italic":US(this.editorEl,"em");break;case"underline":US(this.editorEl,"u");break;case"left":vS(this.editorEl,"left");break;case"center":vS(this.editorEl,"center");break;case"right":vS(this.editorEl,"right");break;case"justify":vS(this.editorEl,"justify");break;case"ul":BS(this.editorEl,"ul"),this.updateContent(),this.updateToolbarState();break;case"ol":BS(this.editorEl,"ol"),this.updateContent(),this.updateToolbarState();break;case"link":break;case"clear":const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),t=[];for(;e.nextNode();){const i=e.currentNode;i.removeAttribute("style"),["B","STRONG","I","EM","U","SPAN","FONT"].includes(i.tagName)&&t.push(i)}for(const e of t){for(;e.firstChild;)e.parentNode?.insertBefore(e.firstChild,e);e.remove()}this.ensureAtLeastOneParagraph()}this.updateContent(),this.updateToolbarState()}setBtnActive(e,t){const i=this.buttonMap.get(e);if(i)for(const e of i)e.toggleAttribute("data-active",!!t)}updateToolbarState(){if(!this.editorEl)return;const e=document.getSelection();if(!e||0===e.rangeCount)return;const t=e.getRangeAt(0);if(!this.editorEl.contains(t.commonAncestorContainer))return;const i=function(e){for(;e&&!(e instanceof HTMLElement);)e=e.parentNode;return e}(t.startContainer)||this.editorEl,M=getComputedStyle(i),n=fS(t.startContainer,this.editorEl)||this.editorEl,o=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("strong"===t||"b"===t)return!0;const i=getComputedStyle(e).fontWeight;if(parseInt(i,10)>=600)return!0}e=e.parentNode}return!1})(),r=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=e.tagName.toLowerCase();if("em"===t||"i"===t)return!0;if("italic"===getComputedStyle(e).fontStyle)return!0}e=e.parentNode}return!1})(),s=(()=>{let e=i;for(;e&&e!==this.editorEl;){if(e instanceof HTMLElement){const t=getComputedStyle(e).textDecorationLine;if(t&&t.includes("underline"))return!0;if("u"===e.tagName.toLowerCase())return!0}e=e.parentNode}return!1})(),a=!!i.closest("a"),l=n.style.textAlign||getComputedStyle(n).textAlign||"start",N="start"===l?"left":l,g=!!i.closest("li")&&i.closest("ul,ol")?.tagName.toLowerCase()||"";if(this.setBtnActive("bold",o),this.setBtnActive("italic",r),this.setBtnActive("underline",s),this.setBtnActive("link",a),this.setBtnActive("left","left"===N&&!["center","right","justify"].includes(N)),this.setBtnActive("center","center"===N),this.setBtnActive("right","right"===N),this.setBtnActive("justify","justify"===N),this.setBtnActive("ul","ul"===g),this.setBtnActive("ol","ol"===g),this.headingSelect){const e=n.tagName.toLowerCase(),t=["h1","h2","h3"].includes(e)?e:"p";this.headingSelect.value!==t&&(this.headingSelect.value=t)}if(this.fontSelect){const e=(M.fontFamily||"").replace(/["']/g,"").split(",")[0].trim().toLowerCase();if(e)for(const t of Array.from(this.fontSelect.options))if(t.value.toLowerCase()===e){this.fontSelect.value=t.value;break}}if(this.colorInput){const e=YS(M.color);e&&this.colorInput.value.toLowerCase()!==e.toLowerCase()&&(this.colorInput.value=e),this.colorSwatchEl&&(this.colorSwatchEl.style.backgroundColor=this.colorInput.value)}if(this.bgColorInput){const e=getComputedStyle(i).backgroundColor;if(e&&!/transparent|rgba\(\s*0\s*,\s*0\s*,\s*0\s*,\s*0\s*\)/i.test(e)){const t=YS(e);t&&this.bgColorInput.value.toLowerCase()!==t.toLowerCase()&&(this.bgColorInput.value=t)}this.bgSwatchEl&&(this.bgSwatchEl.style.backgroundColor=this.bgColorInput.value)}}syncPreview(){this.updateContent()}updateContent(){if(!this.editorEl)return;this.ensureAtLeastOneParagraph();const e=""===(this.editorEl.textContent??"").trim();this.editorEl.classList.toggle("empty",e);const t=this.editorEl.cloneNode(!0);if(this.noStyles)t.querySelectorAll("[style]").forEach((e=>e.removeAttribute("style")));else{const e=document.createTreeWalker(this.editorEl,NodeFilter.SHOW_ELEMENT),i=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),M=["font-weight","font-style","text-decoration","color","background-color","font-size","font-family","text-align","line-height","letter-spacing","white-space","vertical-align","list-style-position","padding-inline-start"];for(;e.nextNode()&&i.nextNode();){const t=e.currentNode,n=i.currentNode,o=window.getComputedStyle(t),r=M.map((e=>`${e}:${o.getPropertyValue(e)}`)).join(";");r.trim()&&n.setAttribute("style",r)}}this.content=t.innerHTML,this.previewEl&&(this.previewEl.innerHTML=this.content),this.dispatchEvent(new CustomEvent("nile-change",{detail:{content:this.content},bubbles:!0,composed:!0}))}};e([ce({type:String,attribute:!0,reflect:!0})],FS.prototype,"value",void 0),e([ce({type:Boolean,attribute:!0,reflect:!0})],FS.prototype,"noStyles",void 0),e([ce({type:Boolean,attribute:"singlelineeditor",reflect:!0})],FS.prototype,"singleLineEditor",void 0),e([ce({type:String})],FS.prototype,"placeholder",void 0),e([ce({attribute:"mentions",reflect:!0,converter:{fromAttribute:e=>{try{const t=JSON.parse(e),i={};for(const e of Object.keys(t)){const M=t[e];Array.isArray(M)&&(i[e]=M.filter((e=>e&&"string"==typeof e.key&&"string"==typeof e.label)).map((e=>({key:e.key,label:e.label}))))}return i}catch{return{}}},toAttribute:e=>JSON.stringify(e)}})],FS.prototype,"mentions",void 0),e([De()],FS.prototype,"content",void 0),FS=e([Ne("nile-rich-text-editor")],FS);"undefined"!=typeof window&&(window.nileElementsVersion='"1.3.9-beta-1.1"',window.nileVersion="__NILE_VERSION__",window.process=window.process||{env:{NODE_ENV:"production"}});const HS=r`
|
|
14827
14831
|
:host {
|
|
14828
14832
|
--sidebar-width: 240px;
|
|
14829
14833
|
--sidebar-collapsed-width: 70px;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","./nile-skeleton-loader.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,r,e,i,s,a,o,_templateObject,d;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){r=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;i=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){s=_litDirectivesClassMapJs.classMap;},function(_nileSkeletonLoaderCssCjsJs){a=_nileSkeletonLoaderCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",d=/*#__PURE__*/function(_o){function d(){var _this;_classCallCheck(this,d);_this=_callSuper(this,d,arguments),_this.variant="text",_this.width="",_this.height="",_this.borderRadius="";return _this;}_inherits(d,_o);return _createClass(d,[{key:"formatDimension",value:function formatDimension(t){if(!t)return"";if("number"==typeof t)return"".concat(t,"px");var r=String(t).trim();return /^\d+(\.\d+)?$/.test(r)?"".concat(r,"px"):r;}},{key:"getComputedWidth",value:function getComputedWidth(){var t=this.formatDimension(this.width);return t||("circular"===this.variant?"40px":"100%");}},{key:"getComputedHeight",value:function getComputedHeight(){var t=this.formatDimension(this.height);return t||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px");}},{key:"getComputedBorderRadius",value:function getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))";}},{key:"render",value:function render(){return r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div\n part=\"base\"\n class=\"skeleton-loader\"\n >\n <div\n part=\"skeleton\"\n class=","\n style=\"\n width: ",";\n height: ",";\n border-radius: ",";\n \"\n ></div>\n </div>\n "])),s({skeleton:!0,"skeleton--text":"text"===this.variant,"skeleton--circular":"circular"===this.variant,"skeleton--rectangular":"rectangular"===this.variant,"skeleton--rounded":"rounded"===this.variant}),this.getComputedWidth(),this.getComputedHeight(),this.getComputedBorderRadius());}}],[{key:"styles",get:function get(){return[a];}}]);}(o));t([e({reflect:!0})],d.prototype,"variant",void 0),t([e({type:String})],d.prototype,"width",void 0),t([e({type:String})],d.prototype,"height",void 0),t([e({type:String,attribute:"border-radius"})],d.prototype,"borderRadius",void 0),_export("N",d=t([i("nile-skeleton-loader")],d));}};});
|
|
1
|
+
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","./nile-skeleton-loader.css.cjs.js","../internal/nile-element.cjs.js"],function(_export,_context){"use strict";var t,r,e,i,s,a,o,_templateObject,d;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){t=_tslib.__decorate;},function(_lit){r=_lit.html;},function(_litDecoratorsJs){e=_litDecoratorsJs.property;i=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){s=_litDirectivesClassMapJs.classMap;},function(_nileSkeletonLoaderCssCjsJs){a=_nileSkeletonLoaderCssCjsJs.s;},function(_internalNileElementCjsJs){o=_internalNileElementCjsJs.N;}],execute:function execute(){_export("N",d=/*#__PURE__*/function(_o){function d(){var _this;_classCallCheck(this,d);_this=_callSuper(this,d,arguments),_this.variant="text",_this.width="",_this.height="",_this.borderRadius="";return _this;}_inherits(d,_o);return _createClass(d,[{key:"formatDimension",value:function formatDimension(t){if(!t)return"";if("number"==typeof t)return"".concat(t,"px");var r=String(t).trim();return /^\d+(\.\d+)?$/.test(r)?"".concat(r,"px"):r;}},{key:"getComputedWidth",value:function getComputedWidth(){var t=this.formatDimension(this.width);return t||("circular"===this.variant?"40px":"calc(100% - 20px)");}},{key:"getComputedHeight",value:function getComputedHeight(){var t=this.formatDimension(this.height);return t||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px");}},{key:"getComputedBorderRadius",value:function getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))";}},{key:"render",value:function render(){return r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div\n part=\"base\"\n class=\"skeleton-loader\"\n >\n <div\n part=\"skeleton\"\n class=","\n style=\"\n width: ",";\n height: ",";\n border-radius: ",";\n \"\n ></div>\n </div>\n "])),s({skeleton:!0,"skeleton--text":"text"===this.variant,"skeleton--circular":"circular"===this.variant,"skeleton--rectangular":"rectangular"===this.variant,"skeleton--rounded":"rounded"===this.variant}),this.getComputedWidth(),this.getComputedHeight(),this.getComputedBorderRadius());}}],[{key:"styles",get:function get(){return[a];}}]);}(o));t([e({reflect:!0})],d.prototype,"variant",void 0),t([e({type:String})],d.prototype,"width",void 0),t([e({type:String})],d.prototype,"height",void 0),t([e({type:String,attribute:"border-radius"})],d.prototype,"borderRadius",void 0),_export("N",d=t([i("nile-skeleton-loader")],d));}};});
|
|
2
2
|
//# sourceMappingURL=nile-skeleton-loader.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-skeleton-loader.cjs.js","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.ts"],"sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-skeleton-loader.css';\nimport NileElement from '../internal/nile-element';\n\n@customElement('nile-skeleton-loader')\nexport class NileSkeletonLoader extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' | 'rounded' = 'text';\n\n @property({ type: String }) width: string | number = '';\n\n @property({ type: String }) height: string | number = '';\n\n @property({ type: String, attribute: 'border-radius' }) borderRadius = '';\n\n private formatDimension(value: string | number): string {\n if (!value) return '';\n if (typeof value === 'number') {\n return `${value}px`;\n }\n
|
|
1
|
+
{"version":3,"file":"nile-skeleton-loader.cjs.js","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.ts"],"sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-skeleton-loader.css';\nimport NileElement from '../internal/nile-element';\n\n@customElement('nile-skeleton-loader')\nexport class NileSkeletonLoader extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' | 'rounded' = 'text';\n\n @property({ type: String }) width: string | number = '';\n\n @property({ type: String }) height: string | number = '';\n\n @property({ type: String, attribute: 'border-radius' }) borderRadius = '';\n\n private formatDimension(value: string | number): string {\n if (!value) return '';\n if (typeof value === 'number') {\n return `${value}px`;\n }\n const trimmed = String(value).trim();\n if (/^\\d+(\\.\\d+)?$/.test(trimmed)) {\n return `${trimmed}px`;\n }\n return trimmed;\n }\n\n private getComputedWidth(): string {\n const formattedWidth = this.formatDimension(this.width);\n if (formattedWidth) {\n return formattedWidth;\n }\n return this.variant === 'circular' ? '40px' : 'calc(100% - 20px)';\n }\n\n private getComputedHeight(): string {\n const formattedHeight = this.formatDimension(this.height);\n if (formattedHeight) {\n return formattedHeight;\n }\n if (this.variant === 'circular') {\n return '40px';\n }\n return this.variant === 'text' ? '1em' : '20px';\n }\n\n private getComputedBorderRadius(): string {\n if (this.borderRadius) {\n return this.borderRadius;\n }\n if (this.variant === 'circular') {\n return '50%';\n }\n if (this.variant === 'rounded') {\n return 'var(--nile-radius-radius-md, var(--ng-radius-md, 4px))';\n }\n if (this.variant === 'text') {\n return 'var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))';\n }\n return 'var(--nile-radius-radius-xs, var(--ng-radius-xs))';\n }\n\n public render(): TemplateResult {\n return html`\n <div\n part=\"base\"\n class=\"skeleton-loader\"\n >\n <div\n part=\"skeleton\"\n class=${classMap({\n skeleton: true,\n 'skeleton--text': this.variant === 'text',\n 'skeleton--circular': this.variant === 'circular',\n 'skeleton--rectangular': this.variant === 'rectangular',\n 'skeleton--rounded': this.variant === 'rounded',\n })}\n style=\"\n width: ${this.getComputedWidth()};\n height: ${this.getComputedHeight()};\n border-radius: ${this.getComputedBorderRadius()};\n \"\n ></div>\n </div>\n `;\n }\n}\n\nexport default NileSkeletonLoader;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-skeleton-loader': NileSkeletonLoader;\n }\n}\n\n"],"names":["NileSkeletonLoader","d","constructor","this","variant","width","height","borderRadius","_this","_inherits","_o","_createClass","key","value","formatDimension","concat","trimmed","String","trim","test","getComputedWidth","formattedWidth","getComputedHeight","formattedHeight","getComputedBorderRadius","render","html","_templateObject","_taggedTemplateLiteral","classMap","skeleton","__decorate","get","styles","NileElement","property","reflect","prototype","type","attribute","_export","customElement"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",i=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n display:
|
|
1
|
+
System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,i;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",i=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n box-sizing: border-box;\n display: block;\n width: 100%;\n }\n\n .skeleton-loader {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n .skeleton {\n display: block;\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));\n animation: blink 1.2s ease-in-out infinite;\n box-sizing: border-box;\n }\n\n .skeleton--rectangular {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .skeleton--circular {\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n }\n\n .skeleton--text {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));\n height: 1em;\n }\n\n .skeleton--rounded {\n border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));\n }\n\n @keyframes blink {\n 0%, 100% {\n opacity: 0.6;\n }\n 50% {\n opacity: 1;\n }\n }\n"]))));}};});
|
|
2
2
|
//# sourceMappingURL=nile-skeleton-loader.css.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-skeleton-loader.css.cjs.js","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n display:
|
|
1
|
+
{"version":3,"file":"nile-skeleton-loader.css.cjs.js","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n box-sizing: border-box;\n display: block;\n width: 100%;\n }\n\n .skeleton-loader {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n .skeleton {\n display: block;\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));\n animation: blink 1.2s ease-in-out infinite;\n box-sizing: border-box;\n }\n\n .skeleton--rectangular {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .skeleton--circular {\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n }\n\n .skeleton--text {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));\n height: 1em;\n }\n\n .skeleton--rounded {\n border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));\n }\n\n @keyframes blink {\n 0%, 100% {\n opacity: 0.6;\n }\n 50% {\n opacity: 1;\n }\n }\n`;\n\nexport default [styles];\n\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
|
|
@@ -3,11 +3,15 @@ import{css as r}from"lit";const i=r`
|
|
|
3
3
|
-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
|
|
4
4
|
-moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
|
|
5
5
|
text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
|
|
6
|
-
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
display: block;
|
|
8
|
+
width: 100%;
|
|
7
9
|
}
|
|
8
10
|
|
|
9
11
|
.skeleton-loader {
|
|
10
|
-
display:
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
align-items: center;
|
|
11
15
|
width: 100%;
|
|
12
16
|
}
|
|
13
17
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as e,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{s as a}from"./nile-skeleton-loader.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let d=class extends o{constructor(){super(...arguments),this.variant="text",this.width="",this.height="",this.borderRadius=""}static get styles(){return[a]}formatDimension(t){if(!t)return"";if("number"==typeof t)return`${t}px`;const r=String(t).trim();return/^\d+(\.\d+)?$/.test(r)?`${r}px`:r}getComputedWidth(){const t=this.formatDimension(this.width);return t||("circular"===this.variant?"40px":"100%")}getComputedHeight(){const t=this.formatDimension(this.height);return t||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px")}getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))"}render(){return r`
|
|
1
|
+
import{__decorate as t}from"tslib";import{html as r}from"lit";import{property as e,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{s as a}from"./nile-skeleton-loader.css.esm.js";import{N as o}from"../internal/nile-element.esm.js";let d=class extends o{constructor(){super(...arguments),this.variant="text",this.width="",this.height="",this.borderRadius=""}static get styles(){return[a]}formatDimension(t){if(!t)return"";if("number"==typeof t)return`${t}px`;const r=String(t).trim();return/^\d+(\.\d+)?$/.test(r)?`${r}px`:r}getComputedWidth(){const t=this.formatDimension(this.width);return t||("circular"===this.variant?"40px":"calc(100% - 20px)")}getComputedHeight(){const t=this.formatDimension(this.height);return t||("circular"===this.variant?"40px":"text"===this.variant?"1em":"20px")}getComputedBorderRadius(){return this.borderRadius?this.borderRadius:"circular"===this.variant?"50%":"rounded"===this.variant?"var(--nile-radius-radius-md, var(--ng-radius-md, 4px))":"text"===this.variant?"var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))":"var(--nile-radius-radius-xs, var(--ng-radius-xs))"}render(){return r`
|
|
2
2
|
<div
|
|
3
3
|
part="base"
|
|
4
4
|
class="skeleton-loader"
|
|
@@ -4,11 +4,15 @@ export const styles = css `
|
|
|
4
4
|
-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
|
|
5
5
|
-moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
|
|
6
6
|
text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
|
|
7
|
-
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
display: block;
|
|
9
|
+
width: 100%;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.skeleton-loader {
|
|
11
|
-
display:
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
12
16
|
width: 100%;
|
|
13
17
|
}
|
|
14
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-skeleton-loader.css.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-skeleton-loader.css.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n box-sizing: border-box;\n display: block;\n width: 100%;\n }\n\n .skeleton-loader {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n .skeleton {\n display: block;\n background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));\n animation: blink 1.2s ease-in-out infinite;\n box-sizing: border-box;\n }\n\n .skeleton--rectangular {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n }\n\n .skeleton--circular {\n border-radius: 50%;\n aspect-ratio: 1 / 1;\n }\n\n .skeleton--text {\n border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px));\n height: 1em;\n }\n\n .skeleton--rounded {\n border-radius: var(--nile-radius-radius-md, var(--ng-radius-md, 4px));\n }\n\n @keyframes blink {\n 0%, 100% {\n opacity: 0.6;\n }\n 50% {\n opacity: 1;\n }\n }\n`;\n\nexport default [styles];\n\n"]}
|
|
@@ -21,13 +21,10 @@ let NileSkeletonLoader = class NileSkeletonLoader extends NileElement {
|
|
|
21
21
|
if (typeof value === 'number') {
|
|
22
22
|
return `${value}px`;
|
|
23
23
|
}
|
|
24
|
-
// If it's a string, check if it's a plain number (no units)
|
|
25
24
|
const trimmed = String(value).trim();
|
|
26
|
-
// Check if it's a numeric value without units (matches numbers, optionally with decimals)
|
|
27
25
|
if (/^\d+(\.\d+)?$/.test(trimmed)) {
|
|
28
26
|
return `${trimmed}px`;
|
|
29
27
|
}
|
|
30
|
-
// If it already has units (px, %, em, rem, etc.), return as-is
|
|
31
28
|
return trimmed;
|
|
32
29
|
}
|
|
33
30
|
getComputedWidth() {
|
|
@@ -35,7 +32,7 @@ let NileSkeletonLoader = class NileSkeletonLoader extends NileElement {
|
|
|
35
32
|
if (formattedWidth) {
|
|
36
33
|
return formattedWidth;
|
|
37
34
|
}
|
|
38
|
-
return this.variant === 'circular' ? '40px' : '100%';
|
|
35
|
+
return this.variant === 'circular' ? '40px' : 'calc(100% - 20px)';
|
|
39
36
|
}
|
|
40
37
|
getComputedHeight() {
|
|
41
38
|
const formattedHeight = this.formatDimension(this.height);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-skeleton-loader.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.ts"],"names":[],"mappings":";AAAA,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAG5C,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QAKwB,YAAO,GAAoD,MAAM,CAAC;QAEnE,UAAK,GAAoB,EAAE,CAAC;QAE5B,WAAM,GAAoB,EAAE,CAAC;QAED,iBAAY,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-skeleton-loader.js","sourceRoot":"","sources":["../../../src/nile-skeleton-loader/nile-skeleton-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-skeleton-loader.css';\nimport NileElement from '../internal/nile-element';\n\n@customElement('nile-skeleton-loader')\nexport class NileSkeletonLoader extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n @property({ reflect: true }) variant: 'text' | 'circular' | 'rectangular' | 'rounded' = 'text';\n\n @property({ type: String }) width: string | number = '';\n\n @property({ type: String }) height: string | number = '';\n\n @property({ type: String, attribute: 'border-radius' }) borderRadius = '';\n\n private formatDimension(value: string | number): string {\n if (!value) return '';\n if (typeof value === 'number') {\n return `${value}px`;\n }\n const trimmed = String(value).trim();\n if (/^\\d+(\\.\\d+)?$/.test(trimmed)) {\n return `${trimmed}px`;\n }\n return trimmed;\n }\n\n private getComputedWidth(): string {\n const formattedWidth = this.formatDimension(this.width);\n if (formattedWidth) {\n return formattedWidth;\n }\n return this.variant === 'circular' ? '40px' : 'calc(100% - 20px)';\n }\n\n private getComputedHeight(): string {\n const formattedHeight = this.formatDimension(this.height);\n if (formattedHeight) {\n return formattedHeight;\n }\n if (this.variant === 'circular') {\n return '40px';\n }\n return this.variant === 'text' ? '1em' : '20px';\n }\n\n private getComputedBorderRadius(): string {\n if (this.borderRadius) {\n return this.borderRadius;\n }\n if (this.variant === 'circular') {\n return '50%';\n }\n if (this.variant === 'rounded') {\n return 'var(--nile-radius-radius-md, var(--ng-radius-md, 4px))';\n }\n if (this.variant === 'text') {\n return 'var(--nile-radius-radius-xs, var(--ng-radius-xs, 2px))';\n }\n return 'var(--nile-radius-radius-xs, var(--ng-radius-xs))';\n }\n\n public render(): TemplateResult {\n return html`\n <div\n part=\"base\"\n class=\"skeleton-loader\"\n >\n <div\n part=\"skeleton\"\n class=${classMap({\n skeleton: true,\n 'skeleton--text': this.variant === 'text',\n 'skeleton--circular': this.variant === 'circular',\n 'skeleton--rectangular': this.variant === 'rectangular',\n 'skeleton--rounded': this.variant === 'rounded',\n })}\n style=\"\n width: ${this.getComputedWidth()};\n height: ${this.getComputedHeight()};\n border-radius: ${this.getComputedBorderRadius()};\n \"\n ></div>\n </div>\n `;\n }\n}\n\nexport default NileSkeletonLoader;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-skeleton-loader': NileSkeletonLoader;\n }\n}\n\n"]}
|