@logosphere-ui/core 0.0.0-alpha.54 → 0.0.0-alpha.55

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.
@@ -0,0 +1,135 @@
1
+ "use strict";const l=require("lit"),n=require("lit/decorators.js"),f=require("lit/directives/repeat.js");require("./checkbox-BAbPDN6x.cjs");require("./input-DyLKo7h6.cjs");require("./ui-icon-DWl7I5BQ.cjs");const x=':host{display:block;width:100%;box-sizing:border-box;font-family:var(--font-family-base)}*{box-sizing:border-box}.table{width:100%;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.table--borderless{border:0;border-radius:0}.table__scroll{width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--color-tertiary) var(--color-light)}.table__inner{display:flex;flex-direction:column}.table__header{display:flex;position:sticky;top:0;z-index:10;border-radius:var(--radius-md) var(--radius-md) 0 0}.table__body{display:flex;flex-direction:column}.table__row{display:flex;cursor:default;background-color:var(--color-body-bg);transition:background-color var(--transition-speed-fast) var(--transition-timing)}.table__row:hover{background-color:var(--color-light)}.table__body .table__row:last-child .table__cell{border-bottom:0}.table__cell{display:flex;align-items:center;flex-grow:1;flex-shrink:0;height:36px;padding:var(--spacing-0-5) var(--spacing-2);border-bottom:1px solid var(--color-border);overflow:hidden}.table__cell--selection{flex-grow:0;padding-right:0;padding-left:0}.table__cell--selection logosphere-checkbox{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:0}.table__cell--action{flex-grow:0;gap:var(--spacing-1)}.table__cell--header{position:relative;gap:var(--spacing-1);background-color:var(--color-light);padding:var(--spacing-1) var(--spacing-2)}.table__cell--searchable{padding-right:var(--spacing-2)}.table__cell--search-active{justify-content:center!important}.table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.table__cell--sortable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.table__cell--header:first-child{border-top-left-radius:var(--radius-md)}.table__cell--header:last-child{border-top-right-radius:var(--radius-md)}.table--borderless .table__header,.table--borderless .table__cell--header:first-child,.table--borderless .table__cell--header:last-child{border-radius:0}.table__cell--sticky{position:sticky;z-index:2;background-color:var(--color-body-bg)}.table__row:hover .table__cell--sticky{background-color:var(--color-light)}.table__cell--header.table__cell--sticky{top:0;z-index:1;background-color:var(--color-light)}.table__cell--selection.table__cell--sticky{z-index:2}.table__cell--header.table__cell--selection.table__cell--sticky{top:0;z-index:2}.table__cell--sticky-edge{box-shadow:2px 0 4px -2px #00000026}.table__resize-handle{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;touch-action:none;z-index:10}.table__resize-handle:before{content:"";position:absolute;top:10px;bottom:10px;left:50%;width:3px;background-color:var(--color-border);transform:translate(-50%)}.table__resize-handle:hover:before,.table__resize-handle:active:before{background-color:var(--color-primary)}.table__header-main{display:flex;align-items:center;flex:1 1 auto;min-width:0}.table__header-label{font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:18px;letter-spacing:-.12px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table__header-actions{display:inline-flex;align-items:center;justify-content:flex-end;flex:0 0 auto;margin-left:auto}.table__sort-indicator{display:inline-flex;align-items:center;pointer-events:none}.table__sort-arrow{width:16px;height:16px;color:var(--color-primary)}.table__sort-order{min-width:0;height:auto;display:inline-flex;align-items:center;justify-content:center;margin-left:-2px;color:var(--color-primary);font-size:10px;font-weight:var(--font-weight-semibold);line-height:1}.table__search-toggle{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-tertiary);cursor:pointer}.table__search-toggle:hover,.table__search-toggle[aria-pressed=true]{color:var(--color-primary);background-color:var(--color-body-bg)}.table__search-toggle-icon{width:16px;height:16px}.table__search-input{width:100%;min-width:0;--formfield-height: 24px;--formfield-min-height: 24px;--formfield-padding: 0 var(--spacing-1);--input-field-height: 16px;--formfield-border-radius: var(--radius-sm)}.table__cell-text{font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);line-height:20px;letter-spacing:-.14px;color:var(--color-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.table__empty{display:flex;align-items:center;justify-content:center;min-height:120px;padding:var(--spacing-4);color:var(--color-tertiary);font-family:var(--font-family-base);font-size:var(--font-size-sm);box-sizing:border-box}.table__scroll::-webkit-scrollbar{height:8px;width:8px}.table__scroll::-webkit-scrollbar-track{background:var(--color-light);border-radius:var(--radius-sm)}.table__scroll::-webkit-scrollbar-thumb{background-color:var(--color-tertiary);border-radius:var(--radius-sm)}.table__scroll::-webkit-scrollbar-thumb:hover{background-color:var(--color-secondary)}';var C=Object.defineProperty,$=Object.getOwnPropertyDescriptor,c=(p,e,t,i)=>{for(var r=i>1?void 0:i?$(e,t):e,s=p.length-1,a;s>=0;s--)(a=p[s])&&(r=(i?a(e,t,r):a(r))||r);return i&&r&&C(e,t,r),r};const z=160,S=96,m=48,K=300,y="__selection__",W=60;function T(p){return p==="center"?"center":p==="right"?"flex-end":"flex-start"}exports.Table=class extends l.LitElement{constructor(){super(...arguments),this.columns=[],this.rows=[],this.rowKey="id",this.emptyMessage="Kayıt bulunamadı",this.selection=!1,this.stickySelection=!1,this.resizable=!1,this.borderless=!1,this.sortStates=[],this.selectedKeys=new Set,this.searchValues=new Map,this.activeSearchKeys=new Set,this.columnWidths=new Map,this.warnedSortableWithoutHandlerKey="",this.warnedSearchableWithoutHandlerKey="",this.warnedSelectionWithoutHandler=!1,this.searchTimers=new Map,this.resizing=!1,this.resizeStartX=0,this.resizeStartWidth=0,this._handleResizePointerDown=(e,t)=>{e.preventDefault(),e.stopPropagation(),this.resizing=!0,this.resizeColumn=t,this.resizeStartX=e.clientX,this.resizeStartWidth=this._effectiveWidth(t),window.addEventListener("pointermove",this._handleResizePointerMove),window.addEventListener("pointerup",this._handleResizePointerUp),window.addEventListener("pointercancel",this._handleResizePointerUp)},this._handleResizePointerMove=e=>{if(!this.resizing||!this.resizeColumn)return;const t=e.clientX-this.resizeStartX,i=Math.max(W,Math.round(this.resizeStartWidth+t)),r=new Map(this.columnWidths);r.set(this.resizeColumn.key,i),this.columnWidths=r},this._handleResizePointerUp=()=>{if(!this.resizing||!this.resizeColumn)return;const e=this.resizeColumn;this.resizing=!1,this.resizeColumn=void 0,this._removeResizeListeners();const t={column:e,key:e.key,width:this._effectiveWidth(e)};this.onWidthChange?.(t),this.dispatchEvent(new CustomEvent("width-change",{detail:t,bubbles:!0,composed:!0}))},this._renderRow=(e,t,i)=>{const r=i.get(y);return l.html`
2
+ <div class="table__row" role="row" @click=${()=>this._handleRowClick(e,t)}>
3
+ ${this.selection?l.html`
4
+ <div
5
+ class=${this._selectionCellClass(!1,r)}
6
+ style=${this._selectionCellStyle(r)}
7
+ role="cell"
8
+ >
9
+ <logosphere-checkbox
10
+ .checked=${this.selectedKeys.has(this._rowSelectionKey(e,t))}
11
+ @click=${s=>s.stopPropagation()}
12
+ @lgsChange=${s=>this._handleRowSelectionChange(s,e,t)}
13
+ ></logosphere-checkbox>
14
+ </div>
15
+ `:l.nothing}
16
+ ${f.repeat(this.columns,s=>s.key,s=>{const a=i.get(s.key);return l.html`
17
+ <div
18
+ class=${`table__cell${this._stickyCellClass(a)}`}
19
+ style=${this._cellStyle(s,a)}
20
+ role="cell"
21
+ >
22
+ ${this._renderCellValue(s,e,t)}
23
+ </div>
24
+ `})}
25
+ ${this.actionColumn?l.html`
26
+ <div
27
+ class="table__cell table__cell--action"
28
+ style=${this._actionCellStyle()}
29
+ role="cell"
30
+ @click=${s=>s.stopPropagation()}
31
+ >
32
+ ${this.actionColumn.render({row:e,rowIndex:t})}
33
+ </div>
34
+ `:l.nothing}
35
+ </div>
36
+ `}}firstUpdated(){this._warnSortableWithoutHandler(),this._warnSearchableWithoutHandler(),this._warnSelectionWithoutHandler()}willUpdate(e){e.has("columns")&&this._pruneStaleColumnState()}updated(e){(e.has("columns")||e.has("onSortChange"))&&this._warnSortableWithoutHandler(),(e.has("columns")||e.has("onSearch"))&&this._warnSearchableWithoutHandler(),this._warnSelectionWithoutHandler()}_pruneStaleColumnState(){const e=new Set(this.columns.map(t=>t.key));Array.from(this.columnWidths.keys()).some(t=>!e.has(t))&&(this.columnWidths=new Map(Array.from(this.columnWidths).filter(([t])=>e.has(t)))),Array.from(this.searchValues.keys()).some(t=>!e.has(t))&&(this.searchValues=new Map(Array.from(this.searchValues).filter(([t])=>e.has(t)))),Array.from(this.activeSearchKeys.keys()).some(t=>!e.has(t))&&(this.activeSearchKeys=new Set(Array.from(this.activeSearchKeys).filter(t=>e.has(t)))),this.sortStates.some(t=>!e.has(t.key))&&(this.sortStates=this.sortStates.filter(t=>e.has(t.key))),this.resizeColumn&&!e.has(this.resizeColumn.key)&&(this.resizing=!1,this.resizeColumn=void 0,this._removeResizeListeners())}disconnectedCallback(){this.searchTimers.forEach(e=>clearTimeout(e)),this.searchTimers.clear(),this._removeResizeListeners(),super.disconnectedCallback()}_effectiveWidth(e){return this.columnWidths.get(e.key)??e.width??z}_totalWidth(){return this.columns.reduce((t,i)=>t+this._effectiveWidth(i),0)+(this.selection?m:0)+(this.actionColumn?this.actionColumn.width??S:0)}_stickyLayout(){const e=new Map,t=this.columns.filter(a=>a.sticky),i=this.selection&&this.stickySelection;if(!t.length&&!i)return e;let r=0,s;return i&&(e.set(y,{left:r,isEdge:!1}),s=y,r+=m),this.columns.forEach(a=>{a.sticky&&(e.set(a.key,{left:r,isEdge:!1}),s=a.key,r+=this._effectiveWidth(a))}),s&&e.set(s,{...e.get(s),isEdge:!0}),e}_stickyCellStyle(e){return e?`left:${e.left}px;`:""}_stickyCellClass(e){return e?` table__cell--sticky${e.isEdge?" table__cell--sticky-edge":""}`:""}_selectionCellClass(e,t){return`table__cell${e?" table__cell--header":""} table__cell--selection${this._stickyCellClass(t)}`}_selectionCellStyle(e){return`width:${m}px; justify-content:center; ${this._stickyCellStyle(e)}`}_warnSortableWithoutHandler(){const e=this.columns.filter(i=>i.sortable).map(i=>i.key);if(this.onSortChange||!e.length){this.warnedSortableWithoutHandlerKey="";return}const t=e.join("|");this.warnedSortableWithoutHandlerKey!==t&&(this.warnedSortableWithoutHandlerKey=t,console.warn(`[logosphere-table] sortable true verilen kolonlar var (${e.join(", ")}), ancak onSortChange callback'i verilmemiş. Sort etkileşimi için onSortChange sağlayın.`))}_warnSelectionWithoutHandler(){if(!this.selection||this.onSelectChange){this.warnedSelectionWithoutHandler=!1;return}this.warnedSelectionWithoutHandler||(this.warnedSelectionWithoutHandler=!0,console.warn("[logosphere-table] selection true verilmiş, ancak onSelectChange callback'i verilmemiş. Selection değişikliklerini almak için onSelectChange sağlayın."))}_warnSearchableWithoutHandler(){const e=this.columns.filter(i=>i.searchable).map(i=>i.key);if(this.onSearch||!e.length){this.warnedSearchableWithoutHandlerKey="";return}const t=e.join("|");this.warnedSearchableWithoutHandlerKey!==t&&(this.warnedSearchableWithoutHandlerKey=t,console.warn(`[logosphere-table] searchable true verilen kolonlar var (${e.join(", ")}), ancak onSearch callback'i verilmemiş. Search etkileşimi için onSearch sağlayın.`))}_rowSelectionKey(e,t){return e[this.rowKey]??t}_selectedRows(){return this.rows.filter((e,t)=>this.selectedKeys.has(this._rowSelectionKey(e,t)))}_emitSelectionChange(){const e={selectedRows:this._selectedRows(),selectedKeys:Array.from(this.selectedKeys)};this.onSelectChange?.(e),this.dispatchEvent(new CustomEvent("select-change",{detail:e,bubbles:!0,composed:!0}))}_setSelectedKeys(e){this.selectedKeys=e,this._emitSelectionChange()}_handleSelectAllChange(e){e.stopPropagation();const t=e.detail.checked?new Set(this.rows.map((i,r)=>this._rowSelectionKey(i,r))):new Set;this._setSelectedKeys(t)}_handleRowSelectionChange(e,t,i){e.stopPropagation();const r=new Set(this.selectedKeys),s=this._rowSelectionKey(t,i);e.detail.checked?r.add(s):r.delete(s),this._setSelectedKeys(r)}_handleRowClick(e,t){this.onRowClick?.(e,t),this.dispatchEvent(new CustomEvent("row-click",{detail:{row:e,rowIndex:t},bubbles:!0,composed:!0}))}_sortDetailStates(e){return e.map((t,i)=>{const r=this.columns.find(s=>s.key===t.key);if(r)return{column:r,key:t.key,direction:t.direction,order:i+1}}).filter(t=>!!t)}_nextSortDirection(e){if(!e)return"asc";if(e==="asc")return"desc"}_handleSortClick(e,t){if(!e.sortable||!this.onSortChange)return;const i=this.sortStates.findIndex(d=>d.key===e.key);let r,s;if(t?.shiftKey)if(r=[...this.sortStates],i>=0){const d=r[i];s=this._nextSortDirection(d.direction),s?r[i]={...d,direction:s}:r.splice(i,1)}else s="asc",r.push({key:e.key,direction:"asc"});else{const d=this.sortStates.length===1?this.sortStates[0]:void 0;s=this._nextSortDirection(d?.key===e.key?d.direction:void 0),r=s?[{key:e.key,direction:s}]:[]}const a=this._sortDetailStates(r),b={column:e,key:e.key,direction:s,sorts:a,multi:a.length>1};this.sortStates=r,this.onSortChange(b),this.dispatchEvent(new CustomEvent("sort-change",{detail:b,bubbles:!0,composed:!0}))}_handleSearchInput(e,t){e.stopPropagation();const i=e.currentTarget,r=e.detail?.value??i.value??"",s=new Map(this.searchValues);s.set(t.key,r),this.searchValues=s;const a=this.searchTimers.get(t.key);a&&clearTimeout(a);const b=setTimeout(()=>{this.searchTimers.delete(t.key);const o={values:this.columns.filter(h=>h.searchable).map(h=>({key:h.key,value:this.searchValues.get(h.key)??""})).filter(h=>h.value.trim()!=="")};this.onSearch?.(o),this.dispatchEvent(new CustomEvent("search-change",{detail:o,bubbles:!0,composed:!0}))},K);this.searchTimers.set(t.key,b)}_toggleSearchInput(e,t){e.stopPropagation();const i=new Set(this.activeSearchKeys);i.has(t.key)?i.delete(t.key):i.add(t.key),this.activeSearchKeys=i}_renderCellValue(e,t,i){const r=t[e.key];return e.render?e.render({value:r,row:t,rowIndex:i,column:e}):l.html`<span class="table__cell-text">${r==null?"":String(r)}</span>`}_cellStyle(e,t){return`width:${this._effectiveWidth(e)}px; justify-content:${T(e.align)}; ${this._stickyCellStyle(t)}`}_actionCellStyle(){return`width:${this.actionColumn?.width??S}px; justify-content:flex-end;`}_headerCellClass(e){const{sortable:t,sorted:i,searchable:r,searchActive:s,resizable:a,sticky:b}=e;return["table__cell","table__cell--header",t?"table__cell--sortable":"",i?"table__cell--sorted":"",r?"table__cell--searchable":"",s?"table__cell--search-active":"",a?"table__cell--resizable":""].filter(Boolean).join(" ").concat(this._stickyCellClass(b))}_renderSortIndicator(e,t=!1){return e?l.html`
37
+ <span class="table__sort-indicator" aria-hidden="true">
38
+ <ui-icon
39
+ class="table__sort-arrow"
40
+ name=${e.direction==="asc"?"uil-arrow-up":"uil-arrow-down"}
41
+ size="16"
42
+ ></ui-icon>
43
+ ${t?l.html`<span class="table__sort-order">${e.order}</span>`:l.nothing}
44
+ </span>
45
+ `:l.nothing}_renderSearchToggle(e,t){return e.searchable?l.html`
46
+ <button
47
+ class="table__search-toggle"
48
+ type="button"
49
+ aria-label=${t?`${e.label} aramasını kapat`:`${e.label} ara`}
50
+ aria-pressed=${t?"true":"false"}
51
+ @click=${i=>this._toggleSearchInput(i,e)}
52
+ @keydown=${i=>i.stopPropagation()}
53
+ >
54
+ <ui-icon class="table__search-toggle-icon" name="uil-search" size="16"></ui-icon>
55
+ </button>
56
+ `:l.nothing}_renderSearchInput(e,t){return!e.searchable||!t?l.nothing:l.html`
57
+ <logosphere-input
58
+ class="table__search-input"
59
+ placeholder=${e.label}
60
+ .value=${this.searchValues.get(e.key)??""}
61
+ @click=${i=>i.stopPropagation()}
62
+ @keydown=${i=>i.stopPropagation()}
63
+ @input=${i=>this._handleSearchInput(i,e)}
64
+ ></logosphere-input>
65
+ `}_renderHeaderMain(e,t){return t?l.html`<span class="table__header-main">${this._renderSearchInput(e,t)}</span>`:l.html`<span class="table__header-main">
66
+ <span class="table__header-label">${e.label}</span>
67
+ </span>`}_removeResizeListeners(){window.removeEventListener("pointermove",this._handleResizePointerMove),window.removeEventListener("pointerup",this._handleResizePointerUp),window.removeEventListener("pointercancel",this._handleResizePointerUp)}_renderResizeHandle(e){return this.resizable?l.html`
68
+ <span
69
+ class="table__resize-handle"
70
+ role="separator"
71
+ aria-orientation="vertical"
72
+ aria-label=${`${e.label} genişliğini yeniden boyutlandır`}
73
+ @pointerdown=${t=>this._handleResizePointerDown(t,e)}
74
+ @click=${t=>t.stopPropagation()}
75
+ ></span>
76
+ `:l.nothing}_renderHeader(e){const t=this.selectedKeys.size,i=this.rows.length>0&&t===this.rows.length,r=t>0&&t<this.rows.length,s=e.get(y),a=this._sortDetailStates(this.sortStates),b=new Map(a.map(o=>[o.key,o])),d=a.length>1;return l.html`
77
+ <div class="table__header" role="row">
78
+ ${this.selection?l.html`
79
+ <div
80
+ class=${this._selectionCellClass(!0,s)}
81
+ style=${this._selectionCellStyle(s)}
82
+ role="columnheader"
83
+ >
84
+ <logosphere-checkbox
85
+ .checked=${i}
86
+ .indeterminate=${r}
87
+ @click=${o=>o.stopPropagation()}
88
+ @lgsChange=${o=>this._handleSelectAllChange(o)}
89
+ ></logosphere-checkbox>
90
+ </div>
91
+ `:l.nothing}
92
+ ${f.repeat(this.columns,o=>o.key,o=>{const h=!!(o.sortable&&this.onSortChange),u=h?b.get(o.key):void 0,k=!!u,v=!!o.searchable,g=v&&this.activeSearchKeys.has(o.key),w=e.get(o.key);return l.html`
93
+ <div
94
+ class=${this._headerCellClass({sortable:h,sorted:k,searchable:v,searchActive:g,resizable:this.resizable,sticky:w})}
95
+ style=${this._cellStyle(o,w)}
96
+ role="columnheader"
97
+ tabindex=${h?"0":l.nothing}
98
+ aria-sort=${h?u?u.direction==="asc"?"ascending":"descending":"none":l.nothing}
99
+ @click=${_=>this._handleSortClick(o,_)}
100
+ @keydown=${_=>{_.key!=="Enter"&&_.key!==" "||(_.preventDefault(),this._handleSortClick(o,_))}}
101
+ >
102
+ ${this._renderHeaderMain(o,g)}
103
+ <span class="table__header-actions">
104
+ ${this._renderSearchToggle(o,g)}
105
+ ${this._renderSortIndicator(u,d)}
106
+ </span>
107
+ ${this._renderResizeHandle(o)}
108
+ </div>
109
+ `})}
110
+ ${this.actionColumn?l.html`
111
+ <div
112
+ class="table__cell table__cell--header table__cell--action"
113
+ style=${this._actionCellStyle()}
114
+ role="columnheader"
115
+ aria-label="Actions"
116
+ ></div>
117
+ `:l.nothing}
118
+ </div>
119
+ `}_renderBody(e,t){return this.rows.length?l.html`
120
+ <div class="table__body">
121
+ ${f.repeat(this.rows,(i,r)=>i[this.rowKey]??r,(i,r)=>this._renderRow(i,r,t))}
122
+ </div>
123
+ `:l.html`<div class="table__empty" style=${`min-width:${e}px; width:100%;`}>
124
+ ${this.emptyMessage}
125
+ </div>`}_tableClass(){return["table",this.borderless?"table--borderless":""].filter(Boolean).join(" ")}render(){const e=this._totalWidth(),t=this.maxHeight?`max-height:${this.maxHeight}px;`:l.nothing,i=this._stickyLayout();return l.html`
126
+ <div class=${this._tableClass()}>
127
+ <div class="table__scroll" style=${t}>
128
+ <div class="table__inner" style=${`min-width:${e}px; width:100%;`}>
129
+ ${this._renderHeader(i)} ${this._renderBody(e,i)}
130
+ </div>
131
+ </div>
132
+ </div>
133
+ `}};exports.Table.styles=[l.css`
134
+ ${l.unsafeCSS(x)}
135
+ `];c([n.property({attribute:!1})],exports.Table.prototype,"columns",2);c([n.property({attribute:!1})],exports.Table.prototype,"actionColumn",2);c([n.property({attribute:!1})],exports.Table.prototype,"rows",2);c([n.property({type:String,attribute:"row-key"})],exports.Table.prototype,"rowKey",2);c([n.property({type:String,attribute:"empty-message"})],exports.Table.prototype,"emptyMessage",2);c([n.property({type:Number,attribute:"max-height"})],exports.Table.prototype,"maxHeight",2);c([n.property({type:Boolean})],exports.Table.prototype,"selection",2);c([n.property({type:Boolean,attribute:"sticky-selection"})],exports.Table.prototype,"stickySelection",2);c([n.property({type:Boolean})],exports.Table.prototype,"resizable",2);c([n.property({type:Boolean})],exports.Table.prototype,"borderless",2);c([n.property({attribute:!1})],exports.Table.prototype,"onRowClick",2);c([n.property({attribute:!1})],exports.Table.prototype,"onSortChange",2);c([n.property({attribute:!1})],exports.Table.prototype,"onSelectChange",2);c([n.property({attribute:!1})],exports.Table.prototype,"onSearch",2);c([n.property({attribute:!1})],exports.Table.prototype,"onWidthChange",2);c([n.state()],exports.Table.prototype,"sortStates",2);c([n.state()],exports.Table.prototype,"selectedKeys",2);c([n.state()],exports.Table.prototype,"searchValues",2);c([n.state()],exports.Table.prototype,"activeSearchKeys",2);c([n.state()],exports.Table.prototype,"columnWidths",2);exports.Table=c([n.customElement("logosphere-table")],exports.Table);
package/dist/table.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./table-CpzsQ87V.cjs");Object.defineProperty(exports,"Table",{enumerable:!0,get:()=>e.Table});
package/dist/table.js ADDED
@@ -0,0 +1,4 @@
1
+ import { T as o } from "./table-3-P_g6-i.js";
2
+ export {
3
+ o as Table
4
+ };
@@ -1,7 +1,7 @@
1
1
  import { unsafeCSS as d, css as _, LitElement as m, html as h } from "lit";
2
2
  import { property as s, state as c, query as u, customElement as v } from "lit/decorators.js";
3
3
  import { createPopper as b } from "@popperjs/core";
4
- import "./input-DIbZxkKp.js";
4
+ import "./input-N3Z8D7q1.js";
5
5
  import "./ui-icon-BeR-PaPg.js";
6
6
  const g = ":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";
7
7
  var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, n, a) => {
@@ -1,4 +1,4 @@
1
- "use strict";const a=require("lit"),t=require("lit/decorators.js"),l=require("@popperjs/core");require("./input-tZU_snSC.cjs");require("./ui-icon-DWl7I5BQ.cjs");const u=":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(p,e,r,o)=>{for(var s=o>1?void 0:o?d(e,r):e,n=p.length-1,c;n>=0;n--)(c=p[n])&&(s=(o?c(e,r,s):c(s))||s);return o&&s&&h(e,r,s),s};exports.TimePicker=class extends a.LitElement{constructor(){super(...arguments),this.value="",this.label="",this.helper="",this.error="",this.placeholder="__:__",this.required=!1,this.disabled=!1,this.readonly=!1,this.size="default",this.variant="default",this._isOpen=!1,this._hour=0,this._minute=0,this._handleOutsideClick=e=>{this._isOpen&&!e.composedPath().includes(this)&&(this._isOpen=!1)},this._handleInputChange=e=>{e.stopPropagation();const r=e.detail?.value??"";if(/^\d{2}:\d{2}$/.test(r)){const[o,s]=this._parseValue(r);this._hour=o,this._minute=s;const n=`${this._pad(o)}:${this._pad(s)}`;this.value=n,this._emit(n)}},this._handleInputClear=e=>{e.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1},this._incrementHour=()=>{this._hour=(this._hour+1)%24,this._syncValue()},this._decrementHour=()=>{this._hour=(this._hour-1+24)%24,this._syncValue()},this._incrementMinute=()=>{this._minute=(this._minute+1)%60,this._syncValue()},this._decrementMinute=()=>{this._minute=(this._minute-1+60)%60,this._syncValue()}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}willUpdate(e){if(e.has("value")&&/^\d{1,2}:\d{2}$/.test(this.value)){const[r,o]=this._parseValue(this.value);this._hour=r,this._minute=o}}updated(e){e.has("_isOpen")&&(this._isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper()))}_parseValue(e){const r=e.match(/^(\d{1,2}):(\d{2})$/);return r?[Math.min(23,Math.max(0,parseInt(r[1],10))),Math.min(59,Math.max(0,parseInt(r[2],10)))]:[0,0]}_pad(e){return String(e).padStart(2,"0")}_updatePopper(){!this._referenceEl||!this._popupEl||(this._popperInstance=l.createPopper(this._referenceEl,this._popupEl,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start"]}},{name:"preventOverflow",options:{boundary:document.documentElement,padding:8}}]}))}_destroyPopper(){this._popperInstance?.destroy(),this._popperInstance=void 0}_showPopover(){this._popupEl?.showPopover?.()}_hidePopover(){const e=this._popupEl;try{e?.hidePopover?.()}catch{}}_togglePopup(){if(!(this.disabled||this.readonly))if(this._isOpen)this._isOpen=!1;else{const[e,r]=this._parseValue(this.value);this._hour=e,this._minute=r,this._isOpen=!0}}_clearValue(e){e?.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1}_setNow(){const e=new Date;this._hour=e.getHours(),this._minute=e.getMinutes(),this._syncValue()}_emit(e){this.onChange?.(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:e}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:e}}))}_syncValue(){const e=`${this._pad(this._hour)}:${this._pad(this._minute)}`;this.value=e,this._emit(e)}_startSpin(e){e(),this._spinInterval=setInterval(e,120)}_stopSpin(){clearInterval(this._spinInterval),this._spinInterval=void 0}_renderPopup(){return a.html`
1
+ "use strict";const a=require("lit"),t=require("lit/decorators.js"),l=require("@popperjs/core");require("./input-DyLKo7h6.cjs");require("./ui-icon-DWl7I5BQ.cjs");const u=":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(p,e,r,o)=>{for(var s=o>1?void 0:o?d(e,r):e,n=p.length-1,c;n>=0;n--)(c=p[n])&&(s=(o?c(e,r,s):c(s))||s);return o&&s&&h(e,r,s),s};exports.TimePicker=class extends a.LitElement{constructor(){super(...arguments),this.value="",this.label="",this.helper="",this.error="",this.placeholder="__:__",this.required=!1,this.disabled=!1,this.readonly=!1,this.size="default",this.variant="default",this._isOpen=!1,this._hour=0,this._minute=0,this._handleOutsideClick=e=>{this._isOpen&&!e.composedPath().includes(this)&&(this._isOpen=!1)},this._handleInputChange=e=>{e.stopPropagation();const r=e.detail?.value??"";if(/^\d{2}:\d{2}$/.test(r)){const[o,s]=this._parseValue(r);this._hour=o,this._minute=s;const n=`${this._pad(o)}:${this._pad(s)}`;this.value=n,this._emit(n)}},this._handleInputClear=e=>{e.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1},this._incrementHour=()=>{this._hour=(this._hour+1)%24,this._syncValue()},this._decrementHour=()=>{this._hour=(this._hour-1+24)%24,this._syncValue()},this._incrementMinute=()=>{this._minute=(this._minute+1)%60,this._syncValue()},this._decrementMinute=()=>{this._minute=(this._minute-1+60)%60,this._syncValue()}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}willUpdate(e){if(e.has("value")&&/^\d{1,2}:\d{2}$/.test(this.value)){const[r,o]=this._parseValue(this.value);this._hour=r,this._minute=o}}updated(e){e.has("_isOpen")&&(this._isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper()))}_parseValue(e){const r=e.match(/^(\d{1,2}):(\d{2})$/);return r?[Math.min(23,Math.max(0,parseInt(r[1],10))),Math.min(59,Math.max(0,parseInt(r[2],10)))]:[0,0]}_pad(e){return String(e).padStart(2,"0")}_updatePopper(){!this._referenceEl||!this._popupEl||(this._popperInstance=l.createPopper(this._referenceEl,this._popupEl,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start"]}},{name:"preventOverflow",options:{boundary:document.documentElement,padding:8}}]}))}_destroyPopper(){this._popperInstance?.destroy(),this._popperInstance=void 0}_showPopover(){this._popupEl?.showPopover?.()}_hidePopover(){const e=this._popupEl;try{e?.hidePopover?.()}catch{}}_togglePopup(){if(!(this.disabled||this.readonly))if(this._isOpen)this._isOpen=!1;else{const[e,r]=this._parseValue(this.value);this._hour=e,this._minute=r,this._isOpen=!0}}_clearValue(e){e?.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1}_setNow(){const e=new Date;this._hour=e.getHours(),this._minute=e.getMinutes(),this._syncValue()}_emit(e){this.onChange?.(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:e}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:e}}))}_syncValue(){const e=`${this._pad(this._hour)}:${this._pad(this._minute)}`;this.value=e,this._emit(e)}_startSpin(e){e(),this._spinInterval=setInterval(e,120)}_stopSpin(){clearInterval(this._spinInterval),this._spinInterval=void 0}_renderPopup(){return a.html`
2
2
  <div data-timepicker-popup popover="manual" class="timepicker__popup">
3
3
  <div class="timepicker__spinner">
4
4
  <!-- Sol sütun: saat -->
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./timepicker-DFIhvxai.cjs");Object.defineProperty(exports,"TimePicker",{enumerable:!0,get:()=>e.TimePicker});
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./timepicker-Bpf2d4Nn.cjs");Object.defineProperty(exports,"TimePicker",{enumerable:!0,get:()=>e.TimePicker});
@@ -1,4 +1,4 @@
1
- import { T as i } from "./timepicker-C22yBR_J.js";
1
+ import { T as i } from "./timepicker-B9l6HN-d.js";
2
2
  export {
3
3
  i as TimePicker
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@logosphere-ui/core",
3
- "version": "0.0.0-alpha.54",
3
+ "version": "0.0.0-alpha.55",
4
4
  "description": "A modern, framework-agnostic UI component library built with Lit and Web Components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -36,6 +36,11 @@
36
36
  "import": "./dist/modal.js",
37
37
  "require": "./dist/modal.cjs"
38
38
  },
39
+ "./table": {
40
+ "types": "./dist/organisms/Table/index.d.ts",
41
+ "import": "./dist/table.js",
42
+ "require": "./dist/table.cjs"
43
+ },
39
44
  "./toast": {
40
45
  "types": "./dist/organisms/Toast/index.d.ts",
41
46
  "import": "./dist/toast.js",
@@ -1,60 +0,0 @@
1
- "use strict";const n=require("lit"),e=require("lit/decorators.js"),y=require("lit/directives/live.js");require("./formfield-JXiv9mvJ.cjs");require("./ui-icon-DWl7I5BQ.cjs");const g=":host{display:block}.input__field{width:100%;background:transparent;border:none;outline:none;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);box-sizing:border-box;line-height:1.5}.input__field::placeholder{color:var(--color-tertiary)}.input__field:disabled{cursor:not-allowed}.input__field--default{height:var(--input-field-height, 16px)}.input__field--large{height:var(--input-field-height-large, 24px)}.input__clear-btn,.input__password-toggle{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;outline:none;flex-shrink:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.input__clear-btn:hover,.input__password-toggle:hover{color:var(--color-gray-600)}";var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,s=(p,t,i,o)=>{for(var r=o>1?void 0:o?m(t,i):t,a=p.length-1,l;a>=0;a--)(l=p[a])&&(r=(o?l(t,i,r):l(r))||r);return o&&r&&c(t,i,r),r};const d={0:/\d/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/};function u(p){return p.split("").filter(t=>/[a-zA-Z0-9]/.test(t)).join("")}function v(p,t){let i=0,o="";for(let r=0;r<t.length&&!(i>=p.length);r++){const a=t[r],l=d[a];if(l){for(;i<p.length&&!l.test(p[i]);)i++;i<p.length&&(o+=p[i++])}else o+=a}return o}function f(p,t,i){let o=0;for(let r=0;r<p.length;r++)if(d[t[r]]&&(o++,o===i))return r+1;return p.length}exports.LogosphereInput=class extends n.LitElement{constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.name="",this.autocomplete="",this.pattern="",this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this.pickOnly=!1,this.mask="",this.showPasswordToggle=!0,this.suppressNativeValidation=!1,this.errorDisplay="always",this._internalError="",this._showPassword=!1,this._invalid=!1,this.handleInput=t=>{const i=t.target;if(this.mask){const o=i.selectionStart??i.value.length,r=u(i.value.slice(0,o)).length,a=u(i.value),l=v(a,this.mask);i.value=l,this.value=l;const h=f(l,this.mask,r);requestAnimationFrame(()=>i.setSelectionRange(h,h))}else this.value=i.value;this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this._invalid=!1,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,rawValue:this.mask?u(this.value):this.value,originalEvent:t}}))},this.handleChange=t=>{const i=t.target;this.value=i.value;const o=i.checkValidity();this._invalid=!o,!o&&!this.suppressNativeValidation&&(this._internalError=i.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:t}})),this.dispatchEvent(new CustomEvent("lgsChange",{bubbles:!0,composed:!0,detail:{value:this.value}}))},this.handleBlur=()=>{this._inputElement&&(this._invalid=!this._inputElement.checkValidity())},this.handleKeyDown=t=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:t.key,originalEvent:t}}))},this.handleKeyUp=t=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:t.key,originalEvent:t}}))},this.handleClear=()=>{this.value="",this._invalid=!1,this._inputElement&&(this._inputElement.value=""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))},this.handlePasswordToggle=()=>{this.disabled||(this._showPassword=!this._showPassword,this._inputElement?.focus())}}get inputElement(){return this._inputElement}focus(){this._inputElement?.focus()}blur(){this._inputElement?.blur()}select(){this._inputElement?.select()}setSelectionRange(t,i,o){this._inputElement?.setSelectionRange(t,i,o)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(t){this._inputElement?.setCustomValidity(t),this._internalError=t,this.requestUpdate()}willUpdate(t){t.has("type")&&this.type!=="password"&&this._showPassword&&(this._showPassword=!1),t.has("showPasswordToggle")&&!this.showPasswordToggle&&this._showPassword&&(this._showPassword=!1)}get _effectivePlaceholder(){return this.placeholder?this.placeholder:this.mask?this.mask.replace(/[0a*]/g,"_"):""}render(){const t=this.error||this._internalError,i=this.errorDisplay==="on-invalid"?this._invalid?t:"":t,o=this.readonly||this.pickOnly,r=!!this.value&&!this.disabled&&(this.pickOnly||!this.readonly),a=this.type==="password",l=a&&this._showPassword?"text":this.type,h=`input__field input__field--${this.size}`;return n.html`
2
- <logosphere-formfield
3
- .label=${this.label}
4
- .helper=${this.helper}
5
- .error=${i}
6
- .required=${this.required}
7
- .disabled=${this.disabled}
8
- .readonly=${this.readonly}
9
- .placeholder=${this._effectivePlaceholder}
10
- .size=${this.size}
11
- .variant=${this.variant}
12
- >
13
- <slot name="prefix" slot="prefix"></slot>
14
- <input
15
- class="${h}"
16
- type=${l}
17
- .value=${y.live(this.value)}
18
- placeholder=${this._effectivePlaceholder||n.nothing}
19
- name=${this.name||n.nothing}
20
- autocomplete=${this.autocomplete||n.nothing}
21
- ?required=${this.required}
22
- ?disabled=${this.disabled}
23
- ?readonly=${o}
24
- minlength=${this.minlength??n.nothing}
25
- maxlength=${this.maxlength??n.nothing}
26
- pattern=${this.pattern||n.nothing}
27
- min=${this.min??n.nothing}
28
- max=${this.max??n.nothing}
29
- step=${this.step??n.nothing}
30
- @input=${this.handleInput}
31
- @change=${this.handleChange}
32
- @blur=${this.handleBlur}
33
- @keydown=${this.handleKeyDown}
34
- @keyup=${this.handleKeyUp}
35
- />
36
- ${r?n.html`
37
- <button
38
- type="button"
39
- slot="clear"
40
- class="input__clear-btn"
41
- @click=${this.handleClear}
42
- tabindex="-1"
43
- >
44
- <ui-icon name="uil-times" size="14"></ui-icon>
45
- </button>
46
- `:n.nothing}
47
- ${a&&this.showPasswordToggle?n.html`
48
- <button
49
- type="button"
50
- slot="suffix"
51
- class="input__password-toggle"
52
- aria-label=${this._showPassword?"Şifreyi gizle":"Şifreyi göster"}
53
- @click=${this.handlePasswordToggle}
54
- >
55
- <ui-icon name=${this._showPassword?"uil-eye-slash":"uil-eye"} size="16"></ui-icon>
56
- </button>
57
- `:n.nothing}
58
- <slot name="suffix" slot="suffix"></slot>
59
- </logosphere-formfield>
60
- `}};exports.LogosphereInput.styles=[n.css`${n.unsafeCSS(g)}`];s([e.query("input")],exports.LogosphereInput.prototype,"_inputElement",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"value",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"type",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"placeholder",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"name",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"autocomplete",2);s([e.property({type:Number})],exports.LogosphereInput.prototype,"minlength",2);s([e.property({type:Number})],exports.LogosphereInput.prototype,"maxlength",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"pattern",2);s([e.property({type:Number})],exports.LogosphereInput.prototype,"min",2);s([e.property({type:Number})],exports.LogosphereInput.prototype,"max",2);s([e.property({type:Number})],exports.LogosphereInput.prototype,"step",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"size",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"variant",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"label",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"helper",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"error",2);s([e.property({type:Boolean})],exports.LogosphereInput.prototype,"required",2);s([e.property({type:Boolean})],exports.LogosphereInput.prototype,"disabled",2);s([e.property({type:Boolean})],exports.LogosphereInput.prototype,"readonly",2);s([e.property({type:Boolean,attribute:"pick-only"})],exports.LogosphereInput.prototype,"pickOnly",2);s([e.property({type:String})],exports.LogosphereInput.prototype,"mask",2);s([e.property({type:Boolean,attribute:"show-password-toggle"})],exports.LogosphereInput.prototype,"showPasswordToggle",2);s([e.property({type:Boolean,attribute:"suppress-native-validation"})],exports.LogosphereInput.prototype,"suppressNativeValidation",2);s([e.property({type:String,attribute:"error-display"})],exports.LogosphereInput.prototype,"errorDisplay",2);s([e.state()],exports.LogosphereInput.prototype,"_internalError",2);s([e.state()],exports.LogosphereInput.prototype,"_showPassword",2);s([e.state()],exports.LogosphereInput.prototype,"_invalid",2);exports.LogosphereInput=s([e.customElement("logosphere-input")],exports.LogosphereInput);