@lazhus/kg-ui 0.8.1 → 0.8.3

package/custom-elements.json

@@ -1809,7 +1809,7 @@
               "name": "_parseDateStr",
               "parameters": [
                 {
-                  "name": "str"
+                  "name": "val"
                 }
               ]
             },
@@ -1916,7 +1916,7 @@
               "kind": "field",
               "name": "min",
               "type": {
-                "text": "string"
+                "text": "string|number"
               },
               "default": "''"
             },
@@ -1924,7 +1924,7 @@
               "kind": "field",
               "name": "max",
               "type": {
-                "text": "string"
+                "text": "string|number"
               },
               "default": "''"
             },
@@ -1945,6 +1945,27 @@
                 "module": "src/mixins/FormAssociated.js"
               }
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "name": "label",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "name": "showTime",
+              "kind": "field"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "name": "fullwidth",
+              "kind": "field"
+            },
             {
               "kind": "field",
               "name": "formAssociated",

package/dist/components/kg-datepicker.js

@@ -1,4 +1,4 @@
-var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit";import{F as r}from"../chunks/FormAssociated-Cx5D8YQA.js";class n extends(r(a)){static get properties(){return{...super.properties,open:{type:Boolean,reflect:!0},placeholder:{type:String},label:{type:String},showTime:{type:Boolean},mode:{type:String},locale:{type:String},min:{type:String},max:{type:String},_viewDate:{type:Object},_selectedDate:{type:Object}}}constructor(){super(),this.open=!1,this.disabled=!1,this.mode="date",this.locale="tr-TR",this.placeholder="Tarih seçiniz...",this.min="",this.max="",this._viewDate=/* @__PURE__ */new Date,this.value="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_handleOutsideClick(e){this.open&&!e.composedPath().includes(this)&&(this.open=!1)}togglePopup(e){e&&e.stopPropagation(),this.disabled||(this.open=!this.open)}_handleInputKeydown(e){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"].includes(e.key)||(e.ctrlKey||e.metaKey)&&["a","c","v","x"].includes(e.key.toLowerCase())||/^\d$/.test(e.key)||e.preventDefault()}_getDateFormat(){const e=new Date(2023,11,31),t=new Intl.DateTimeFormat(this.locale).formatToParts(e),a=t.filter(e=>"literal"!==e.type).map(e=>e.type),s=t.find(e=>"literal"===e.type);let i=s?s.value:".";return i=i.includes(".")?".":i.includes("/")?"/":i.includes("-")?"-":".",{parts:a,separator:i}}_handleManualInput(e){let t=e.detail.value;t=t.replace(/\D/g,"");const{parts:a,separator:s}=this._getDateFormat(),i="year"===a[0];let r="";if(t.length>0&&(i?t.length<=4?r=t:t.length<=6?r=`${t.slice(0,4)}${s}${t.slice(4)}`:t.length<=8&&(r=`${t.slice(0,4)}${s}${t.slice(4,6)}${s}${t.slice(6)}`):t.length<=2?r=t:t.length<=4?r=`${t.slice(0,2)}${s}${t.slice(2)}`:t.length<=8&&(r=`${t.slice(0,2)}${s}${t.slice(2,4)}${s}${t.slice(4)}`),this.showTime&&t.length>8)){const e=r,a=t.slice(8);r=a.length<=2?`${e} ${a}`:`${e} ${a.slice(0,2)}:${a.slice(2,4)}`}if(t.length>=8){let e,n,o;if(i)o=parseInt(t.slice(0,4)),n=parseInt(t.slice(4,6)),e=parseInt(t.slice(6,8));else{const s=parseInt(t.slice(0,2)),i=parseInt(t.slice(2,4)),r=parseInt(t.slice(4,8));"day"===a[0]?(e=s,n=i,o=r):(n=s,e=i,o=r)}e>31&&(e=31),0===e&&(e=1),n>12&&(n=12),0===n&&(n=1),o>2100&&(o=2100);const l=String(e).padStart(2,"0"),c=String(n).padStart(2,"0"),d=String(o);if(r=i?`${d}${s}${c}${s}${l}`:"day"===a[0]?`${l}${s}${c}${s}${d}`:`${c}${s}${l}${s}${d}`,this.showTime&&t.length>8){r.split(" ")[1];let e=parseInt(t.slice(8,10)||"0"),a=parseInt(t.slice(10,12)||"0");e>23&&(e=23),a>59&&(a=59);const s=String(e).padStart(2,"0"),i=String(a).padStart(2,"0");t.length<=10?r+=` ${s}`:r+=` ${s}:${i}`}}if(this.value=r||t,this.value.length>=8){const e=this.value.split(" ")[0].split(s);if(this.value.split(" ")[1]?.split(":"),3===e.length){let e,t,a;if(i){"year"===currentParts[0]?(a=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),e=parseInt(dateComponents[2])):"day"===currentParts[0]?(e=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),a=parseInt(dateComponents[2])):(t=parseInt(dateComponents[0]),e=parseInt(dateComponents[1]),a=parseInt(dateComponents[2]));let s=0,i=0;if(timePartStr){const e=timePartStr.split(":");e.length>=2&&(s=parseInt(e[0]),i=parseInt(e[1]))}if(a>999){let r=new Date(a,t-1,e,s,i);if(!isNaN(r.getTime())){if(this.min){const e=this._parseDateStr(this.min);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())<new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}if(this.max){const e=this._parseDateStr(this.max);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())>new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}this._viewDate=r,this._selectedDate=r;const e=this._formatValue(r);this.value!==e&&(this.value=e),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}}}}}}_changeMonth(e){const t=new Date(this._viewDate);t.setMonth(t.getMonth()+e),this._viewDate=t}_setViewMonth(e){const t=new Date(this._viewDate);t.setMonth(parseInt(e)),this._viewDate=t}_setViewYear(e){const t=new Date(this._viewDate);t.setFullYear(parseInt(e)),this._viewDate=t}_setTime(e,t){const a=new Date(this._viewDate);if("hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._viewDate=a,this._selectedDate){const a=new Date(this._selectedDate);"hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._selectedDate=a,this.value=this._formatValue(a)}}_formatValue(e){if(!e)return"";const{separator:t,parts:a}=this._getDateFormat(),s=String(e.getDate()).padStart(2,"0"),i=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getFullYear());let n="";return n="year"===a[0]?`${r}${t}${i}${t}${s}`:"day"===a[0]?`${s}${t}${i}${t}${r}`:`${i}${t}${s}${t}${r}`,"year"===this.mode?String(r):"month"===this.mode?`${i}${t}${r}`:(this.showTime&&(n+=` ${String(e.getHours()).padStart(2,"0")}:${String(e.getMinutes()).padStart(2,"0")}`),n)}_handleToday(e){e&&e.stopPropagation();const t=/* @__PURE__ */new Date;this._viewDate=t,this._selectDate(t.getDate(),!0)}_handleDone(e){e&&e.stopPropagation(),this.open=!1}_handleKeydown(e){if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));if("Escape"===e.key)return void(this.open=!1);const t=new Date(this._viewDate);let a=!0;switch(e.key){case"ArrowLeft":t.setDate(t.getDate()-1);break;case"ArrowRight":t.setDate(t.getDate()+1);break;case"ArrowUp":t.setDate(t.getDate()-7);break;case"ArrowDown":t.setDate(t.getDate()+7);break;case"Enter":const e=new Date(this._viewDate);this._isDisabled(e)||this._selectDate(this._viewDate.getDate(),!0);break;default:a=!1}a&&(e.preventDefault(),this._viewDate=t)}_parseDateStr(e){return e?(e.match(/^\d{4}-\d{2}-\d{2}$/),new Date(e)):null}_isDisabled(e){if(!e)return!1;const t=this._parseDateStr(this.min),a=this._parseDateStr(this.max),s=new Date(e.getFullYear(),e.getMonth(),e.getDate());return!!(t&&s<new Date(t.getFullYear(),t.getMonth(),t.getDate()))||!!(a&&s>new Date(a.getFullYear(),a.getMonth(),a.getDate()))}_selectDate(e,t){if(!t)return;const a=new Date(this._viewDate);"date"===this.mode&&a.setDate(e),this._isDisabled(a)||(this._selectedDate=a,this.value=this._formatValue(a),this.showTime&&"date"===this.mode||(this.open=!1),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0})))}_selectMonth(e){const t=new Date(this._viewDate);t.setMonth(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_selectYear(e){const t=new Date(this._viewDate);t.setFullYear(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_renderCalendar(){const e=this._viewDate.getFullYear(),t=this._viewDate.getMonth(),a=this._viewDate.getDate(),s=Array.from({length:12},(e,t)=>{const a=new Date(2e3,t,1);return new Intl.DateTimeFormat(this.locale,{month:"long"}).format(a)});new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7)),new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7));let r=1;(this.locale.startsWith("en-US")||this.locale.startsWith("ja")||this.locale.startsWith("zh"))&&(r=0);const n=[];for(let i=0;i<7;i++){const e=new Date(2024,0,7+i+r);n.push(new Intl.DateTimeFormat(this.locale,{weekday:"short"}).format(e))}let o=(new Date(e,t,1).getDay()-r+7)%7;const l=new Date(e,t+1,0).getDate(),c=new Date(e,t,0).getDate(),d=[];for(let i=o-1;i>=0;i--)d.push({day:c-i,current:!1});for(let i=1;i<=l;i++)d.push({day:i,current:!0});const h=42-d.length;for(let i=1;i<=h;i++)d.push({day:i,current:!1});const p=/* @__PURE__ */(new Date).getFullYear(),g=[];for(let i=p-50;i<=p+50;i++)g.push(i);const u=/* @__PURE__ */new Date,m=a=>a===u.getDate()&&t===u.getMonth()&&e===u.getFullYear(),v=a=>!!this._selectedDate&&a===this._selectedDate.getDate()&&t===this._selectedDate.getMonth()&&e===this._selectedDate.getFullYear();return i`
+var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{F as n}from"../chunks/FormAssociated-Cx5D8YQA.js";class o extends(n(a)){static get properties(){return{...super.properties,open:{type:Boolean,reflect:!0},placeholder:{type:String},label:{type:String},showTime:{type:Boolean},fullwidth:{type:Boolean,reflect:!0},mode:{type:String},locale:{type:String},min:{type:String},max:{type:String},_viewDate:{type:Object},_selectedDate:{type:Object}}}constructor(){super(),this.open=!1,this.disabled=!1,this.mode="date",this.locale="tr-TR",this.placeholder="Tarih seçiniz...",this.min="",this.max="",this._viewDate=/* @__PURE__ */new Date,this.value="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick)}_handleOutsideClick(e){this.open&&!e.composedPath().includes(this)&&(this.open=!1)}togglePopup(e){e&&e.stopPropagation(),this.disabled||(this.open=!this.open)}_handleInputKeydown(e){["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"].includes(e.key)||(e.ctrlKey||e.metaKey)&&["a","c","v","x"].includes(e.key.toLowerCase())||/^\d$/.test(e.key)||e.preventDefault()}_getDateFormat(){const e=new Date(2023,11,31),t=new Intl.DateTimeFormat(this.locale).formatToParts(e),a=t.filter(e=>"literal"!==e.type).map(e=>e.type),s=t.find(e=>"literal"===e.type);let i=s?s.value:".";return i=i.includes(".")?".":i.includes("/")?"/":i.includes("-")?"-":".",{parts:a,separator:i}}_handleManualInput(e){let t=e.detail.value;t=t.replace(/\D/g,"");const{parts:a,separator:s}=this._getDateFormat(),i="year"===a[0];let r="";if(t.length>0&&(i?t.length<=4?r=t:t.length<=6?r=`${t.slice(0,4)}${s}${t.slice(4)}`:t.length<=8&&(r=`${t.slice(0,4)}${s}${t.slice(4,6)}${s}${t.slice(6)}`):t.length<=2?r=t:t.length<=4?r=`${t.slice(0,2)}${s}${t.slice(2)}`:t.length<=8&&(r=`${t.slice(0,2)}${s}${t.slice(2,4)}${s}${t.slice(4)}`),this.showTime&&t.length>8)){const e=r,a=t.slice(8);r=a.length<=2?`${e} ${a}`:`${e} ${a.slice(0,2)}:${a.slice(2,4)}`}if(t.length>=8){let e,n,o;if(i)o=parseInt(t.slice(0,4)),n=parseInt(t.slice(4,6)),e=parseInt(t.slice(6,8));else{const s=parseInt(t.slice(0,2)),i=parseInt(t.slice(2,4)),r=parseInt(t.slice(4,8));"day"===a[0]?(e=s,n=i,o=r):(n=s,e=i,o=r)}e>31&&(e=31),0===e&&(e=1),n>12&&(n=12),0===n&&(n=1),o>2100&&(o=2100);const l=String(e).padStart(2,"0"),c=String(n).padStart(2,"0"),d=String(o);if(r=i?`${d}${s}${c}${s}${l}`:"day"===a[0]?`${l}${s}${c}${s}${d}`:`${c}${s}${l}${s}${d}`,this.showTime&&t.length>8){r.split(" ")[1];let e=parseInt(t.slice(8,10)||"0"),a=parseInt(t.slice(10,12)||"0");e>23&&(e=23),a>59&&(a=59);const s=String(e).padStart(2,"0"),i=String(a).padStart(2,"0");t.length<=10?r+=` ${s}`:r+=` ${s}:${i}`}}if(this.value=r||t,this.value.length>=8){const e=this.value.split(" ")[0].split(s);if(this.value.split(" ")[1]?.split(":"),3===e.length){let e,t,a;if(i){"year"===currentParts[0]?(a=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),e=parseInt(dateComponents[2])):"day"===currentParts[0]?(e=parseInt(dateComponents[0]),t=parseInt(dateComponents[1]),a=parseInt(dateComponents[2])):(t=parseInt(dateComponents[0]),e=parseInt(dateComponents[1]),a=parseInt(dateComponents[2]));let s=0,i=0;if(timePartStr){const e=timePartStr.split(":");e.length>=2&&(s=parseInt(e[0]),i=parseInt(e[1]))}if(a>999){let r=new Date(a,t-1,e,s,i);if(!isNaN(r.getTime())){if(this.min){const e=this._parseDateStr(this.min);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())<new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}if(this.max){const e=this._parseDateStr(this.max);e&&new Date(r.getFullYear(),r.getMonth(),r.getDate())>new Date(e.getFullYear(),e.getMonth(),e.getDate())&&(r=new Date(e))}this._viewDate=r,this._selectedDate=r;const e=this._formatValue(r);this.value!==e&&(this.value=e),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}}}}}}_changeMonth(e){const t=new Date(this._viewDate);t.setMonth(t.getMonth()+e),this._viewDate=t}_setViewMonth(e){const t=new Date(this._viewDate);t.setMonth(parseInt(e)),this._viewDate=t}_setViewYear(e){const t=new Date(this._viewDate);t.setFullYear(parseInt(e)),this._viewDate=t}_setTime(e,t){const a=new Date(this._viewDate);if("hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._viewDate=a,this._selectedDate){const a=new Date(this._selectedDate);"hour"===e&&a.setHours(parseInt(t)),"minute"===e&&a.setMinutes(parseInt(t)),this._selectedDate=a,this.value=this._formatValue(a)}}_formatValue(e){if(!e)return"";const{separator:t,parts:a}=this._getDateFormat(),s=String(e.getDate()).padStart(2,"0"),i=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getFullYear());let n="";return n="year"===a[0]?`${r}${t}${i}${t}${s}`:"day"===a[0]?`${s}${t}${i}${t}${r}`:`${i}${t}${s}${t}${r}`,"year"===this.mode?String(r):"month"===this.mode?`${i}${t}${r}`:(this.showTime&&(n+=` ${String(e.getHours()).padStart(2,"0")}:${String(e.getMinutes()).padStart(2,"0")}`),n)}_handleToday(e){e&&e.stopPropagation();const t=/* @__PURE__ */new Date;this._viewDate=t,this._selectDate(t.getDate(),!0)}_handleDone(e){e&&e.stopPropagation(),this.open=!1}_handleKeydown(e){if(!this.open)return void("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open=!0));if("Escape"===e.key)return void(this.open=!1);const t=new Date(this._viewDate);let a=!0;switch(e.key){case"ArrowLeft":t.setDate(t.getDate()-1);break;case"ArrowRight":t.setDate(t.getDate()+1);break;case"ArrowUp":t.setDate(t.getDate()-7);break;case"ArrowDown":t.setDate(t.getDate()+7);break;case"Enter":const e=new Date(this._viewDate);this._isDisabled(e)||this._selectDate(this._viewDate.getDate(),!0);break;default:a=!1}a&&(e.preventDefault(),this._viewDate=t)}_parseDateStr(e){if(!e)return null;if(e instanceof Date)return e;if("number"==typeof e)return new Date(e);const t=String(e);return t.match(/^\d{4}-\d{2}-\d{2}$/),new Date(t)}_isDisabled(e){if(!e)return!1;const t=this._parseDateStr(this.min),a=this._parseDateStr(this.max),s=new Date(e.getFullYear(),e.getMonth(),e.getDate());return!!(t&&s<new Date(t.getFullYear(),t.getMonth(),t.getDate()))||!!(a&&s>new Date(a.getFullYear(),a.getMonth(),a.getDate()))}_selectDate(e,t){if(!t)return;const a=new Date(this._viewDate);"date"===this.mode&&a.setDate(e),this._isDisabled(a)||(this._selectedDate=a,this.value=this._formatValue(a),this.showTime&&"date"===this.mode||(this.open=!1),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0})))}_selectMonth(e){const t=new Date(this._viewDate);t.setMonth(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_selectYear(e){const t=new Date(this._viewDate);t.setFullYear(e),this._viewDate=t,this._selectedDate=t,this.value=this._formatValue(t),this.open=!1,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}_renderCalendar(){const e=this._viewDate.getFullYear(),t=this._viewDate.getMonth(),a=this._viewDate.getDate(),s=Array.from({length:12},(e,t)=>{const a=new Date(2e3,t,1);return new Intl.DateTimeFormat(this.locale,{month:"long"}).format(a)});new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7)),new Intl.DateTimeFormat(this.locale,{weekday:"narrow"}).format(new Date(2024,0,7));let n=1;(this.locale.startsWith("en-US")||this.locale.startsWith("ja")||this.locale.startsWith("zh"))&&(n=0);const o=[];for(let i=0;i<7;i++){const e=new Date(2024,0,7+i+n);o.push(new Intl.DateTimeFormat(this.locale,{weekday:"short"}).format(e))}let l=(new Date(e,t,1).getDay()-n+7)%7;const c=new Date(e,t+1,0).getDate(),d=new Date(e,t,0).getDate(),h=[];for(let i=l-1;i>=0;i--)h.push({day:d-i,current:!1});for(let i=1;i<=c;i++)h.push({day:i,current:!0});const p=42-h.length;for(let i=1;i<=p;i++)h.push({day:i,current:!1});const g=/* @__PURE__ */(new Date).getFullYear(),u=[];for(let i=g-50;i<=g+50;i++)u.push(i);const m=/* @__PURE__ */new Date,v=a=>a===m.getDate()&&t===m.getMonth()&&e===m.getFullYear(),w=a=>!!this._selectedDate&&a===this._selectedDate.getDate()&&t===this._selectedDate.getMonth()&&e===this._selectedDate.getFullYear();return i`
       <div class="calendar-header">
         <button class="nav-btn" @click="${e=>{e.stopPropagation(),this._changeMonth(-1)}}">←</button>
         <div class="month-year">
@@ -6,15 +6,15 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
                 ${s.map((e,a)=>i`<option value="${a}" ?selected="${a===t}">${e}</option>`)}
             </select>
             <select class="header-select" @click="${e=>e.stopPropagation()}" @change="${e=>this._setViewYear(e.target.value)}">
-                ${g.map(t=>i`<option value="${t}" ?selected="${t===e}">${t}</option>`)}
+                ${u.map(t=>i`<option value="${t}" ?selected="${t===e}">${t}</option>`)}
             </select>
         </div>
         <button class="nav-btn" @click="${e=>{e.stopPropagation(),this._changeMonth(1)}}">→</button>
       </div>
       <div class="calendar-grid">
-        ${n.map(e=>i`<div class="weekday">${e}</div>`)}
-        ${d.map(s=>i`
-          <div class="${classMap({day:!0,"other-month":!s.current,today:s.current&&m(s.day),selected:s.current&&v(s.day),focused:s.current&&s.day===a,disabled:s.current&&this._isDisabled(new Date(e,t,s.day))})}" @click="${e=>{e.stopPropagation(),this._selectDate(s.day,s.current)}}">
+        ${o.map(e=>i`<div class="weekday">${e}</div>`)}
+        ${h.map(s=>i`
+          <div class="${r({day:!0,"other-month":!s.current,today:s.current&&v(s.day),selected:s.current&&w(s.day),focused:s.current&&s.day===a,disabled:s.current&&this._isDisabled(new Date(e,t,s.day))})}" @click="${e=>{e.stopPropagation(),this._selectDate(s.day,s.current)}}">
             ${s.day}
           </div>
         `)}
@@ -90,6 +90,7 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
           .label="${this.label}"
           .errorText="${this.errorText}"
           ?disabled="${this.disabled}"
+          ?fullwidth="${this.fullwidth}"
           @kg-input="${this._handleManualInput}"
           @keydown="${this._handleInputKeydown}"
           @click="${this.togglePopup}"
@@ -105,10 +106,10 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
         </kg-input>
       </div>
       
-      <div class="${classMap({"datepicker-popup":!0,open:this.open})}">
+      <div class="${r({"datepicker-popup":!0,open:this.open})}">
         ${e}
       </div>
-    `}}((e,a,s)=>{a in e?t(e,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[a]=s})(n,"symbol"!=typeof(e="styles")?e+"":e,s`
+    `}}((e,a,s)=>{a in e?t(e,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[a]=s})(o,"symbol"!=typeof(e="styles")?e+"":e,s`
     :host {
       display: inline-block;
       width: 100%;
@@ -347,4 +348,4 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
         font-weight: 700;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     }
-  `),"undefined"==typeof customElements||customElements.get("kg-datepicker")||customElements.define("kg-datepicker",n);export{n as kgdatepicker};
+  `),"undefined"==typeof customElements||customElements.get("kg-datepicker")||customElements.define("kg-datepicker",o);export{o as kgdatepicker};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-accordion-item.d.ts

@@ -6,6 +6,8 @@ export class kgaccordionitem extends LitElement {
   open: boolean;
   /**  */
   disabled: boolean;
+  /** Generated from static properties */
+  title: string;
 }
 
 declare global {
@@ -18,6 +20,7 @@ declare global {
       'kg-accordion-item': {
       open?: boolean;
       disabled?: boolean;
+      title?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-avatar.d.ts

@@ -8,6 +8,16 @@ export class kgavatar extends LitElement {
   shape: string;
   /**  */
   alt: string;
+  /** Generated from static properties */
+  src: string;
+  /** Generated from static properties */
+  name: string;
+  /** Generated from static properties */
+  status: string;
+  /** Generated from static properties */
+  badge: string;
+  /** Generated from static properties */
+  color: string;
 }
 
 declare global {
@@ -21,6 +31,11 @@ declare global {
       size?: string;
       shape?: string;
       alt?: string;
+      src?: string;
+      name?: string;
+      status?: string;
+      badge?: string;
+      color?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-breadcrumbs.d.ts

@@ -6,6 +6,8 @@ export class kgbreadcrumbitem extends LitElement {
   active: boolean;
   /**  */
   separator: string;
+  /** Generated from static properties */
+  href: string;
 }
 
 declare global {
@@ -18,6 +20,7 @@ declare global {
       'kg-breadcrumb-item': {
       active?: boolean;
       separator?: string;
+      href?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-button.d.ts

@@ -26,6 +26,22 @@ export class kgbutton extends LitElement {
   type: string;
   /**  */
   form: any;
+  /** Generated from static properties */
+  fullwidth: boolean;
+  /** Generated from static properties */
+  circular: boolean;
+  /** Generated from static properties */
+  square: boolean;
+  /** Generated from static properties */
+  loading: boolean;
+  /** Generated from static properties */
+  basic: boolean;
+  /** Generated from static properties */
+  inverted: boolean;
+  /** Generated from static properties */
+  active: boolean;
+  /** Generated from static properties */
+  text: boolean;
 }
 
 declare global {
@@ -48,6 +64,14 @@ declare global {
       hasRight?: boolean;
       type?: string;
       form?: any;
+      fullwidth?: boolean;
+      circular?: boolean;
+      square?: boolean;
+      loading?: boolean;
+      basic?: boolean;
+      inverted?: boolean;
+      active?: boolean;
+      text?: boolean;
         [key: string]: any;
       };
     }

package/types/components/kg-card.d.ts

@@ -10,6 +10,10 @@ export class kgcard extends LitElement {
   basic: boolean;
   /**  */
   padded: boolean;
+  /** Generated from static properties */
+  vertical: boolean;
+  /** Generated from static properties */
+  color: string;
 }
 
 declare global {
@@ -24,6 +28,8 @@ declare global {
       inverted?: boolean;
       basic?: boolean;
       padded?: boolean;
+      vertical?: boolean;
+      color?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-datepicker.d.ts

@@ -21,9 +21,15 @@ export class kgdatepicker extends LitElement {
   /**  */
   placeholder: string;
   /**  */
-  min: string;
+  min: string | number;
   /**  */
-  max: string;
+  max: string | number;
+  /**  */
+  label: string;
+  /**  */
+  showTime: boolean;
+  /**  */
+  fullwidth: boolean;
   /**  */
   form: any;
   /**  */
@@ -47,8 +53,11 @@ declare global {
       mode?: string;
       locale?: string;
       placeholder?: string;
-      min?: string;
-      max?: string;
+      min?: string | number;
+      max?: string | number;
+      label?: string;
+      showTime?: boolean;
+      fullwidth?: boolean;
       form?: any;
       type?: string;
         [key: string]: any;

package/types/components/kg-drawer.d.ts

@@ -10,6 +10,8 @@ export class kgdrawer extends LitElement {
   size: string;
   /**  */
   closable: boolean;
+  /** Generated from static properties */
+  noOverlay: boolean;
 }
 
 declare global {
@@ -24,6 +26,7 @@ declare global {
       placement?: string;
       size?: string;
       closable?: boolean;
+      noOverlay?: boolean;
         [key: string]: any;
       };
     }

package/types/components/kg-list.d.ts

@@ -2,6 +2,10 @@ import { LitElement } from 'lit';
 
 /** @customElement kg-list-item */
 export class kglistitem extends LitElement {
+  /** Generated from static properties */
+  active: boolean;
+  /** Generated from static properties */
+  clickable: boolean;
 }
 
 declare global {
@@ -12,7 +16,8 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       'kg-list-item': {
-
+      active?: boolean;
+      clickable?: boolean;
         [key: string]: any;
       };
     }

package/types/components/kg-progress.d.ts

@@ -5,7 +5,7 @@ export class kgprogress extends LitElement {
   /**  */
   value: number;
   /**  */
-  max: number;
+  max: string | number;
   /**  */
   color: string;
   /**  */
@@ -25,7 +25,7 @@ declare global {
     interface IntrinsicElements {
       'kg-progress': {
       value?: number;
-      max?: number;
+      max?: string | number;
       color?: string;
       height?: string;
       showValue?: boolean;

package/types/components/kg-radio.d.ts

@@ -18,6 +18,10 @@ export class kgradio extends LitElement {
   form: any;
   /**  */
   type: string;
+  /** Generated from static properties */
+  label: string;
+  /** Generated from static properties */
+  color: string;
 }
 
 declare global {
@@ -36,6 +40,8 @@ declare global {
       checked?: boolean;
       form?: any;
       type?: string;
+      label?: string;
+      color?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-row.d.ts

@@ -8,6 +8,8 @@ export class kgrow extends LitElement {
   items: string;
   /** Background color */
   color: string;
+  /** Generated from static properties */
+  gap: string;
 }
 
 declare global {
@@ -21,6 +23,7 @@ declare global {
       justify?: string;
       items?: string;
       color?: string;
+      gap?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-slider.d.ts

@@ -13,9 +13,9 @@ export class kgslider extends LitElement {
   /** Form property */
   errorText: string;
   /**  */
-  min: number;
+  min: string | number;
   /**  */
-  max: number;
+  max: string | number;
   /**  */
   step: number;
   /**  */
@@ -41,8 +41,8 @@ declare global {
       disabled?: boolean;
       required?: boolean;
       errorText?: string;
-      min?: number;
-      max?: number;
+      min?: string | number;
+      max?: string | number;
       step?: number;
       hideValue?: boolean;
       showPins?: boolean;

package/types/components/kg-tag.d.ts

@@ -6,6 +6,12 @@ export class kgtag extends LitElement {
   size: string;
   /**  */
   color: string;
+  /** Generated from static properties */
+  pill: boolean;
+  /** Generated from static properties */
+  basic: boolean;
+  /** Generated from static properties */
+  closable: boolean;
 }
 
 declare global {
@@ -18,6 +24,9 @@ declare global {
       'kg-tag': {
       size?: string;
       color?: string;
+      pill?: boolean;
+      basic?: boolean;
+      closable?: boolean;
         [key: string]: any;
       };
     }

package/types/components/kg-text.d.ts

@@ -10,6 +10,12 @@ export class kgtext extends LitElement {
   align: string;
   /**  */
   dividing: boolean;
+  /** Generated from static properties */
+  color: string;
+  /** Generated from static properties */
+  as: string;
+  /** Generated from static properties */
+  disabled: boolean;
 }
 
 declare global {
@@ -24,6 +30,9 @@ declare global {
       weight?: string;
       align?: string;
       dividing?: boolean;
+      color?: string;
+      as?: string;
+      disabled?: boolean;
         [key: string]: any;
       };
     }

package/types/components/kg-toast.d.ts

@@ -8,6 +8,10 @@ export class kgtoast extends LitElement {
   visible: boolean;
   /**  */
   color: string;
+  /** Generated from static properties */
+  title: string;
+  /** Generated from static properties */
+  message: string;
 }
 
 declare global {
@@ -21,6 +25,8 @@ declare global {
       duration?: number;
       visible?: boolean;
       color?: string;
+      title?: string;
+      message?: string;
         [key: string]: any;
       };
     }

package/types/components/kg-tree.d.ts

@@ -8,6 +8,10 @@ export class kgtreeitem extends LitElement {
   selected: boolean;
   /**  */
   level: number;
+  /** Generated from static properties */
+  label: string;
+  /** Generated from static properties */
+  page: string;
 }
 
 declare global {
@@ -21,6 +25,8 @@ declare global {
       expanded?: boolean;
       selected?: boolean;
       level?: number;
+      label?: string;
+      page?: string;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -96,17 +96,24 @@ declare global {
     'kg-accordion-item': {
       open?: boolean;
       disabled?: boolean;
+      title?: string;
       [key: string]: any;
     };
     'kg-avatar': {
       size?: string;
       shape?: string;
       alt?: string;
+      src?: string;
+      name?: string;
+      status?: string;
+      badge?: string;
+      color?: string;
       [key: string]: any;
     };
     'kg-breadcrumb-item': {
       active?: boolean;
       separator?: string;
+      href?: string;
       [key: string]: any;
     };
     'kg-breadcrumbs': {
@@ -126,6 +133,14 @@ declare global {
       hasRight?: boolean;
       type?: string;
       form?: any;
+      fullwidth?: boolean;
+      circular?: boolean;
+      square?: boolean;
+      loading?: boolean;
+      basic?: boolean;
+      inverted?: boolean;
+      active?: boolean;
+      text?: boolean;
       [key: string]: any;
     };
     'kg-card': {
@@ -133,6 +148,8 @@ declare global {
       inverted?: boolean;
       basic?: boolean;
       padded?: boolean;
+      vertical?: boolean;
+      color?: string;
       [key: string]: any;
     };
     'kg-checkbox': {
@@ -190,8 +207,11 @@ declare global {
       mode?: string;
       locale?: string;
       placeholder?: string;
-      min?: string;
-      max?: string;
+      min?: string | number;
+      max?: string | number;
+      label?: string;
+      showTime?: boolean;
+      fullwidth?: boolean;
       form?: any;
       type?: string;
       [key: string]: any;
@@ -209,6 +229,7 @@ declare global {
       placement?: string;
       size?: string;
       closable?: boolean;
+      noOverlay?: boolean;
       [key: string]: any;
     };
     'kg-file-upload': {
@@ -269,7 +290,8 @@ declare global {
       [key: string]: any;
     };
     'kg-list-item': {
-
+      active?: boolean;
+      clickable?: boolean;
       [key: string]: any;
     };
     'kg-loader': {
@@ -288,7 +310,7 @@ declare global {
     };
     'kg-progress': {
       value?: number;
-      max?: number;
+      max?: string | number;
       color?: string;
       height?: string;
       showValue?: boolean;
@@ -304,6 +326,8 @@ declare global {
       checked?: boolean;
       form?: any;
       type?: string;
+      label?: string;
+      color?: string;
       [key: string]: any;
     };
     'kg-radio-group': {
@@ -321,6 +345,7 @@ declare global {
       justify?: string;
       items?: string;
       color?: string;
+      gap?: string;
       [key: string]: any;
     };
     'kg-select': {
@@ -351,8 +376,8 @@ declare global {
       disabled?: boolean;
       required?: boolean;
       errorText?: string;
-      min?: number;
-      max?: number;
+      min?: string | number;
+      max?: string | number;
       step?: number;
       hideValue?: boolean;
       showPins?: boolean;
@@ -399,6 +424,9 @@ declare global {
     'kg-tag': {
       size?: string;
       color?: string;
+      pill?: boolean;
+      basic?: boolean;
+      closable?: boolean;
       [key: string]: any;
     };
     'kg-text': {
@@ -406,6 +434,9 @@ declare global {
       weight?: string;
       align?: string;
       dividing?: boolean;
+      color?: string;
+      as?: string;
+      disabled?: boolean;
       [key: string]: any;
     };
     'kg-textarea': {
@@ -428,6 +459,8 @@ declare global {
       duration?: number;
       visible?: boolean;
       color?: string;
+      title?: string;
+      message?: string;
       [key: string]: any;
     };
     'kg-tree': {
@@ -438,6 +471,8 @@ declare global {
       expanded?: boolean;
       selected?: boolean;
       level?: number;
+      label?: string;
+      page?: string;
       [key: string]: any;
     };
     }