@diniz/webcomponents 1.0.7 → 1.1.3

package/dist/assets/select-demo-page-BORrccnw.js

@@ -1,186 +0,0 @@
-var w=Object.defineProperty;var E=(c,l,e)=>l in c?w(c,l,{enumerable:!0,configurable:!0,writable:!0,value:e}):c[l]=e;var m=(c,l,e)=>E(c,typeof l!="symbol"?l+"":l,e);import{B as y,s as R}from"./app-layout-Dq81XbRZ.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";const k=`
-	<div class="demo-container">
-		<h1>Select Component Demo</h1>
-		<p>Customizable dropdown select with search and multi-configuration options.</p>
-
-		<div class="demo-section">
-			<h2>Basic Select</h2>
-			<div class="demo-grid">
-				<ui-select 
-					id="basicSelect"
-					label="Choose a Fruit"
-					placeholder="Select a fruit..."
-				></ui-select>
-				
-				<ui-select 
-					id="disabledSelect"
-					label="Disabled Select"
-					placeholder="Not available"
-					disabled
-				></ui-select>
-			</div>
-			<div id="basicResult" class="result-display" style="display: none;">
-				<strong>Selected:</strong> <span id="basicValue"></span>
-			</div>
-		</div>
-
-		<div class="demo-section">
-			<h2>Searchable Select</h2>
-			<div class="demo-grid">
-				<ui-select 
-					id="searchableSelect"
-					label="Choose a Country"
-					placeholder="Search countries..."
-					searchable
-				></ui-select>
-			</div>
-			<div id="searchResult" class="result-display" style="display: none;">
-				<strong>Selected Country:</strong> <span id="searchValue"></span>
-			</div>
-		</div>
-
-		<div class="demo-section">
-			<h2>Select Sizes & Preselected</h2>
-			<div class="demo-grid">
-				<ui-select 
-					id="preselectedSelect"
-					label="Choose a Programming Language"
-					placeholder="Select language..."
-					value="javascript"
-				></ui-select>
-			</div>
-			<div id="preselectedResult" class="result-display" style="display: none;">
-				<strong>Selected:</strong> <span id="preselectedValue"></span>
-			</div>
-		</div>
-
-		<div class="demo-section">
-			<h2>Form Example</h2>
-			<form id="userForm" style="max-width: 600px;">
-				<ui-select 
-					id="roleSelect"
-					label="User Role"
-					placeholder="Select role..."
-				></ui-select>
-
-				<ui-select 
-					id="departmentSelect"
-					label="Department"
-					placeholder="Select department..."
-				></ui-select>
-
-				<div style="margin-top: 0.5rem; display: flex; gap: 1rem;">
-					<ui-button type="submit" variant="primary" icon="check">Submit</ui-button>
-					<ui-button type="button" id="resetForm" variant="ghost">Reset</ui-button>
-				</div>
-			</form>
-			<div id="formResult" class="result-display" style="display: none; margin-top: 1rem;">
-				<strong>Form Data:</strong><br>
-				<span id="formValue"></span>
-			</div>
-		</div>
-	</div>
-`,C=`
-	.demo-container {
-		padding: 2rem;
-		max-width: 1200px;
-		margin: 0 auto;
-	}
-
-	.demo-container h1 {
-		font-size: 2rem;
-		margin-bottom: 0.5rem;
-		color: var(--color-ink);
-	}
-
-	.demo-container > p {
-		color: var(--color-text-muted);
-		margin-bottom: 2rem;
-	}
-
-	.demo-section {
-		margin-bottom: 3rem;
-		padding-bottom: 2rem;
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	.demo-section:last-child {
-		border-bottom: none;
-	}
-
-	.demo-section h2 {
-		font-size: 1.5rem;
-		margin-bottom: 1rem;
-		color: var(--color-ink);
-	}
-
-	.demo-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-		gap: 1.5rem;
-		margin-top: 1rem;
-	}
-
-	.demo-grid > * {
-		min-width: 0;
-	}
-
-	.result-display {
-		margin-top: 1rem;
-		padding: 1rem;
-		background: var(--color-muted);
-		border-radius: var(--radius-md);
-		border-left: 4px solid var(--color-primary);
-	}
-
-	form {
-		background: white;
-		padding: 1.5rem;
-		border-radius: var(--radius-lg);
-		border: 1px solid var(--color-border);
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-`;class O extends y{constructor(){super(...arguments);m(this,"isOpen",this.useSignal(!1));m(this,"selectedValue",this.useSignal(""));m(this,"searchTerm",this.useSignal(""));m(this,"options",[])}connectedCallback(){this.setAttribute("data-ui","select"),super.connectedCallback(),this.parseOptions(),this.setupClickOutside()}static get observedAttributes(){return["value","disabled","placeholder","options"]}attributeChangedCallback(e,t,a){e==="value"&&t!==a&&this.selectedValue.set(a||""),e==="options"&&t!==a&&this.parseOptions(),this.render()}parseOptions(){const e=this.getAttribute("options");if(e)try{this.options=JSON.parse(e)}catch(t){console.error("Invalid options JSON",t),this.options=[]}}setupClickOutside(){document.addEventListener("click",e=>{!e.composedPath().includes(this)&&this.isOpen.get()&&this.isOpen.set(!1)})}toggleDropdown(){this.hasAttribute("disabled")||(this.isOpen.set(!this.isOpen.get()),this.isOpen.get()||this.searchTerm.set(""))}selectOption(e){this.selectedValue.set(e),this.setAttribute("value",e),this.isOpen.set(!1),this.searchTerm.set(""),this.dispatchEvent(new CustomEvent("select-change",{bubbles:!0,composed:!0,detail:{value:e,option:this.options.find(t=>t.value===e)}}))}handleSearch(e){this.searchTerm.set(e.toLowerCase())}getFilteredOptions(){const e=this.searchTerm.get();return e?this.options.filter(t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)):this.options}getSelectedLabel(){const e=this.selectedValue.get(),t=this.options.find(a=>a.value===e);return(t==null?void 0:t.label)||this.getAttribute("placeholder")||"Select an option"}render(){const e=this.isOpen.get(),t=this.hasAttribute("disabled"),a=this.hasAttribute("searchable"),u=this.getAttribute("label")||"",h=this.getSelectedLabel(),d=this.getFilteredOptions(),p=this.selectedValue.get()!=="";this.shadowRoot.innerHTML=`
-			<style>${R}</style>
-
-			<div class="select-container">
-				${u?`<label class="select-label">${u}</label>`:""}
-				
-				<div class="select-trigger ${e?"open":""}" part="trigger" tabindex="0" ${t?"disabled":""}>
-					<span class="select-placeholder ${p?"has-selection":""}">${h}</span>
-					<span class="select-arrow ${e?"open":""}">
-						<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-							<polyline points="6 9 12 15 18 9"></polyline>
-						</svg>
-					</span>
-				</div>
-
-				<div class="select-dropdown ${e?"open":""}" part="dropdown">
-					${a?`
-						<input 
-							type="text" 
-							class="select-search" 
-							placeholder="Search..."
-							part="search"
-						>
-					`:""}
-					
-					${d.length>0?d.map(s=>`
-						<div 
-							class="select-option ${s.value===this.selectedValue.get()?"selected":""} ${s.disabled?"disabled":""}"
-							data-value="${s.value}"
-							part="option"
-						>
-							${s.label}
-						</div>
-					`).join(""):`
-						<div class="select-empty">No options found</div>
-					`}
-				</div>
-			</div>
-		`;const o=this.shadowRoot.querySelector(".select-trigger"),i=this.shadowRoot.querySelector(".select-search"),n=this.shadowRoot.querySelectorAll(".select-option:not(.disabled)");o==null||o.addEventListener("click",()=>this.toggleDropdown()),o==null||o.addEventListener("keydown",s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.toggleDropdown())}),i==null||i.addEventListener("input",s=>{this.handleSearch(s.target.value)}),i==null||i.addEventListener("click",s=>s.stopPropagation()),n.forEach(s=>{s.addEventListener("click",()=>{const b=s.getAttribute("data-value");b&&this.selectOption(b)})})}}customElements.define("ui-select",O);class B extends y{async connectedCallback(){super.connectedCallback(),await customElements.whenDefined("ui-select"),await new Promise(l=>setTimeout(l,10)),this.setupSelects(),this.setupEventListeners()}setupSelects(){const l=this.shadowRoot.getElementById("basicSelect"),e=this.shadowRoot.getElementById("disabledSelect"),t=[{value:"apple",label:"🍎 Apple"},{value:"banana",label:"🍌 Banana"},{value:"orange",label:"🍊 Orange"},{value:"grape",label:"🍇 Grape"},{value:"strawberry",label:"🍓 Strawberry"},{value:"watermelon",label:"🍉 Watermelon"}];l&&l.setAttribute("options",JSON.stringify(t)),e&&e.setAttribute("options",JSON.stringify(t));const a=this.shadowRoot.getElementById("searchableSelect"),u=[{value:"us",label:"United States"},{value:"uk",label:"United Kingdom"},{value:"ca",label:"Canada"},{value:"au",label:"Australia"},{value:"de",label:"Germany"},{value:"fr",label:"France"},{value:"jp",label:"Japan"},{value:"br",label:"Brazil"},{value:"in",label:"India"},{value:"cn",label:"China"}];a&&a.setAttribute("options",JSON.stringify(u));const h=this.shadowRoot.getElementById("preselectedSelect"),d=[{value:"javascript",label:"JavaScript"},{value:"typescript",label:"TypeScript"},{value:"python",label:"Python"},{value:"java",label:"Java"},{value:"csharp",label:"C#"},{value:"go",label:"Go"},{value:"rust",label:"Rust"}];h&&h.setAttribute("options",JSON.stringify(d));const p=this.shadowRoot.getElementById("roleSelect"),o=[{value:"admin",label:"Administrator"},{value:"manager",label:"Manager"},{value:"developer",label:"Developer"},{value:"designer",label:"Designer"},{value:"user",label:"User"}];p&&p.setAttribute("options",JSON.stringify(o));const i=this.shadowRoot.getElementById("departmentSelect"),n=[{value:"engineering",label:"Engineering"},{value:"design",label:"Design"},{value:"marketing",label:"Marketing"},{value:"sales",label:"Sales"},{value:"hr",label:"Human Resources"}];i&&i.setAttribute("options",JSON.stringify(n))}setupEventListeners(){const l=this.shadowRoot.getElementById("basicSelect"),e=this.shadowRoot.getElementById("basicResult"),t=this.shadowRoot.getElementById("basicValue");l==null||l.addEventListener("select-change",r=>{e&&t&&(e.style.display="block",t.textContent=`${r.detail.option.label} (${r.detail.value})`)});const a=this.shadowRoot.getElementById("searchableSelect"),u=this.shadowRoot.getElementById("searchResult"),h=this.shadowRoot.getElementById("searchValue");a==null||a.addEventListener("select-change",r=>{u&&h&&(u.style.display="block",h.textContent=`${r.detail.option.label} (${r.detail.value})`)});const d=this.shadowRoot.getElementById("preselectedSelect"),p=this.shadowRoot.getElementById("preselectedResult"),o=this.shadowRoot.getElementById("preselectedValue");d==null||d.addEventListener("select-change",r=>{p&&o&&(p.style.display="block",o.textContent=`${r.detail.option.label} (${r.detail.value})`)});const i=this.shadowRoot.getElementById("userForm"),n=this.shadowRoot.getElementById("roleSelect"),s=this.shadowRoot.getElementById("departmentSelect"),b=this.shadowRoot.getElementById("formResult"),v=this.shadowRoot.getElementById("formValue"),g=this.shadowRoot.getElementById("resetForm");i==null||i.addEventListener("submit",r=>{r.preventDefault();const f=(n==null?void 0:n.getAttribute("value"))||"Not selected",S=(s==null?void 0:s.getAttribute("value"))||"Not selected";b&&v&&(b.style.display="block",v.innerHTML=`Role: <strong>${f}</strong><br>Department: <strong>${S}</strong>`)}),g==null||g.addEventListener("click",()=>{n==null||n.removeAttribute("value"),s==null||s.removeAttribute("value"),b&&(b.style.display="none")})}render(){this.shadowRoot.innerHTML=`
-			<style>${C}</style>
-			${k}
-		`}}customElements.define("select-demo-page",B);

package/dist/assets/table-CSpGgpLR.js

@@ -1,12 +0,0 @@
-var b=Object.defineProperty;var h=(s,e,t)=>e in s?b(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>h(s,typeof e!="symbol"?e+"":e,t);import{B as u,s as w}from"./app-layout-Dq81XbRZ.js";class m extends u{constructor(){super(...arguments);i(this,"columns",[]);i(this,"rows",[])}connectedCallback(){this.setAttribute("data-ui","table"),super.connectedCallback()}set data(t){this.columns=t.columns,this.rows=t.rows,this.render()}get data(){return{columns:this.columns,rows:this.rows}}render(){const t=this.columns.map(n=>`<th class="align-${n.align??"left"}">${n.label}</th>`).join(""),r=this.rows.map((n,o)=>`<tr data-row-index="${o}">${this.columns.map(a=>a.actions?`<td class="align-center actions-cell">
-										${a.actions.edit?`<button class="action-btn edit-btn" data-action="edit" data-row-index="${o}">Edit</button>`:""}
-										${a.actions.delete?`<button class="action-btn delete-btn" data-action="delete" data-row-index="${o}">Delete</button>`:""}
-									</td>`:`<td class="align-${a.align??"left"}">${String(n[a.key]??"")}</td>`).join("")}</tr>`).join("");this.shadowRoot.innerHTML=`
-			<style>${w}</style>
-			<div class="table-wrap">
-				<table>
-					<thead><tr>${t}</tr></thead>
-					<tbody>${r}</tbody>
-				</table>
-			</div>
-		`,this.shadowRoot.querySelectorAll(".action-btn").forEach(n=>{n.addEventListener("click",o=>{const a=o.currentTarget,c=a.dataset.action,d=parseInt(a.dataset.rowIndex||"0",10),l=c==="edit"?"edit-action":"delete-action";this.dispatchEvent(new CustomEvent(l,{bubbles:!0,composed:!0,detail:{row:this.rows[d],rowIndex:d}}))})})}}customElements.define("ui-table",m);

package/dist/assets/table-demo-xve_6QOI.js

@@ -1,67 +0,0 @@
-var h=Object.defineProperty;var u=(l,n,t)=>n in l?h(l,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):l[n]=t;var r=(l,n,t)=>u(l,typeof n!="symbol"?n+"":n,t);import{B as g,s as p}from"./app-layout-Dq81XbRZ.js";import"./table-CSpGgpLR.js";import"./index-CzQ41fnj.js";import"./vendor-BvJLUv9i.js";class m extends g{constructor(){super(...arguments);r(this,"_total",0);r(this,"_currentPage",1);r(this,"_pageSize",10)}connectedCallback(){this.setAttribute("data-ui","pagination"),super.connectedCallback()}static get observedAttributes(){return["total","current-page","page-size"]}attributeChangedCallback(t,a,e){switch(t){case"total":this._total=parseInt(e,10)||0;break;case"current-page":this._currentPage=parseInt(e,10)||1;break;case"page-size":this._pageSize=parseInt(e,10)||10;break}this.render()}get total(){return this._total}set total(t){this._total=t,this.setAttribute("total",String(t))}get currentPage(){return this._currentPage}set currentPage(t){this._currentPage=t,this.setAttribute("current-page",String(t))}get pageSize(){return this._pageSize}set pageSize(t){this._pageSize=t,this.setAttribute("page-size",String(t))}get totalPages(){return Math.ceil(this._total/this._pageSize)}handlePageChange(t){t<1||t>this.totalPages||t===this._currentPage||(this.currentPage=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t,pageSize:this._pageSize,total:this._total,totalPages:this.totalPages},bubbles:!0,composed:!0})))}getPageNumbers(){const t=this.totalPages,a=this._currentPage;if(t<=7)return Array.from({length:t},(i,o)=>o+1);const e=[];return a<=3?e.push(1,2,3,4,"...",t):a>=t-2?e.push(1,"...",t-3,t-2,t-1,t):e.push(1,"...",a-1,a,a+1,"...",t),e}render(){const t=this.totalPages,a=this._currentPage,e=this.getPageNumbers(),i=(a-1)*this._pageSize+1,o=Math.min(a*this._pageSize,this._total);this.shadowRoot.innerHTML=`
-			<style>${p}</style>
-			<div class="pagination-container">
-				<div class="pagination-info">
-					${this._total>0?`Showing ${i} to ${o} of ${this._total}`:"No results"}
-				</div>
-				${t>1?`
-				<nav class="pagination" role="navigation" aria-label="Pagination">
-					<button 
-						class="page-btn nav-btn" 
-						${a===1?"disabled":""}
-						data-page="prev"
-						aria-label="Previous page"
-					>
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-						</svg>
-					</button>
-					${e.map(s=>s==="..."?'<button class="page-btn ellipsis" disabled>...</button>':`
-							<button 
-								class="page-btn ${s===a?"active":""}"
-								data-page="${s}"
-								aria-label="Page ${s}"
-								${s===a?'aria-current="page"':""}
-							>
-								${s}
-							</button>
-						`).join("")}
-					<button 
-						class="page-btn nav-btn" 
-						${a===t?"disabled":""}
-						data-page="next"
-						aria-label="Next page"
-					>
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-						</svg>
-					</button>
-				</nav>
-				`:""}
-			</div>
-		`,this.attachEventListeners()}attachEventListeners(){this.shadowRoot&&this.shadowRoot.addEventListener("click",t=>{const e=t.target.closest(".page-btn");if(!e||e.disabled)return;const i=e.dataset.page;if(i==="prev")this.handlePageChange(this._currentPage-1);else if(i==="next")this.handlePageChange(this._currentPage+1);else if(i){const o=parseInt(i,10);isNaN(o)||this.handlePageChange(o)}})}}customElements.define("ui-pagination",m);const b=`<h1>Table Demo</h1>\r
-<p class="intro">Example of loading JSON data and rendering a table.</p>\r
-\r
-<div class="demo-section">\r
-	<div class="section-header">\r
-		<h2>Data Source</h2>\r
-		<span class="status" id="data-status">Loading...</span>\r
-	</div>\r
-	<div class="code-block">\r
-		<code>fetch('https://dummyjson.com/products')</code>\r
-	</div>\r
-</div>\r
-\r
-<div class="demo-section">\r
-	<h2>Table</h2>\r
-	<div class="action-message" id="action-message" style="display: none;"></div>\r
-	<ui-table id="demo-table"></ui-table>\r
-	<div class="meta" id="data-meta"></div>\r
-	<ui-pagination></ui-pagination>\r
-</div>\r
-\r
-\r
-`,f=":host{display:block;padding:2rem;max-width:1200px;margin:0 auto}.intro{color:var(--color-ink, #0f172a);opacity:.8;margin-bottom:1.5rem}h1{font-size:2rem;margin-bottom:.5rem;color:var(--color-ink, #0f172a)}h2{font-size:1.4rem;margin-top:0;margin-bottom:.75rem;color:var(--color-ink, #0f172a)}.demo-section{margin-bottom:2rem;padding:1.5rem;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.section-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.status{font-size:.85rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:#e2e8f0;color:#334155}.status.loading{background:#fde68a;color:#92400e}.status.success{background:#bbf7d0;color:#166534}.status.error{background:#fecaca;color:#b91c1c}.code-block{background:#f1f5f9;padding:1rem;border-radius:8px;overflow-x:auto}code{font-family:Courier New,monospace;font-size:.9rem;color:#334155}.meta{margin-top:.75rem;margin-bottom:.75rem;font-size:.85rem;color:#64748b}ui-pagination{margin-top:1rem}.json-output{margin:0;background:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem}";class k extends g{constructor(){super(...arguments);r(this,"hasLoaded",!1);r(this,"loading",!1);r(this,"error",null);r(this,"data",null);r(this,"currentPage",1);r(this,"pageSize",10)}connectedCallback(){super.connectedCallback(),this.hasLoaded||(this.hasLoaded=!0,this.loadData())}async loadData(){this.loading=!0,this.error=null,this.render();try{const t=(this.currentPage-1)*this.pageSize,a=await fetch(`https://dummyjson.com/products?limit=${this.pageSize}&skip=${t}`);if(!a.ok)throw new Error(`Request failed: ${a.status}`);const e=await a.json(),i=[{key:"title",label:"Title"},{key:"brand",label:"Brand"},{key:"category",label:"Category"},{key:"price",label:"Price",align:"right"},{key:"rating",label:"Rating",align:"right"},{key:"stock",label:"Stock",align:"right"},{key:"actions",label:"Actions",align:"center",actions:{edit:!0,delete:!0}}],o=e.products.map(s=>({title:s.title,brand:s.brand,category:s.category,price:`$${s.price.toFixed(2)}`,rating:s.rating.toFixed(1),stock:s.stock}));this.data={columns:i,rows:o,meta:{total:e.total,limit:e.limit,skip:e.skip}},this.loading=!1,this.render()}catch(t){this.loading=!1,this.error=t instanceof Error?t.message:"Unknown error",this.render()}}showActionMessage(t){const a=this.shadowRoot.querySelector("#action-message");a&&(a.textContent=t,a.style.display="block",setTimeout(()=>{const e=this.shadowRoot.querySelector("#action-message");e&&(e.style.display="none")},5e3))}render(){var o,s;this.shadowRoot.innerHTML=`
-			<style>${f}</style>
-			${b}
-		`;const t=this.shadowRoot.querySelector("#data-status");t&&(t.textContent=this.loading?"Loading...":this.error?"Error":"Loaded",t.className=`status ${this.loading?"loading":this.error?"error":"success"}`);const a=this.shadowRoot.querySelector("#demo-table");a&&this.data&&(a.data={columns:this.data.columns,rows:this.data.rows});const e=this.shadowRoot.querySelector("ui-pagination");if(e&&((o=this.data)!=null&&o.meta)){e.total=this.data.meta.total,e.currentPage=this.currentPage,e.pageSize=this.pageSize;const c=e.cloneNode(!0);(s=e.parentNode)==null||s.replaceChild(c,e),c.addEventListener("page-change",d=>{this.currentPage=d.detail.page,this.loadData()})}const i=this.shadowRoot.querySelector("#demo-table");i&&(i.addEventListener("edit-action",c=>{const{row:d}=c.detail;this.showActionMessage(`EDIT clicked for "${d.title}"`)}),i.addEventListener("delete-action",c=>{const{row:d}=c.detail;this.showActionMessage(`DELETE clicked for "${d.title}"`)}))}}customElements.define("table-demo",k);export{k as TableDemo};