@lazhus/kg-ui 0.8.3 → 0.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +27 -10
- package/dist/components/kg-card.js +4 -1
- package/dist/components/kg-datepicker.js +21 -21
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -707,7 +707,7 @@
|
|
|
707
707
|
"kind": "field",
|
|
708
708
|
"name": "styles",
|
|
709
709
|
"static": true,
|
|
710
|
-
"default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
710
|
+
"default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; border-top-left-radius: var(--kg-radius-lg, 12px); border-top-right-radius: var(--kg-radius-lg, 12px); } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); border-bottom-left-radius: var(--kg-radius-lg, 12px); border-bottom-right-radius: var(--kg-radius-lg, 12px); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
|
|
711
711
|
},
|
|
712
712
|
{
|
|
713
713
|
"kind": "method",
|
|
@@ -1689,6 +1689,23 @@
|
|
|
1689
1689
|
"static": true,
|
|
1690
1690
|
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; } :host([disabled]) { pointer-events: none; } .datepicker-trigger { width: 100%; } .datepicker-popup { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000; background: var(--kg-bg); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-lg); box-shadow: var(--kg-shadow-lg); padding: 1.25rem; width: 300px; display: none; user-select: none; animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .datepicker-popup.open { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Calendar Styles */ .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .month-year { display: flex; gap: 4px; font-weight: 700; font-size: 1rem; color: var(--kg-text); } .header-select { background: transparent; border: none; color: inherit; font-family: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; padding: 4px; border-radius: 4px; outline: none; transition: background 0.2s; -webkit-appearance: none; } .header-select:hover { background: var(--kg-surface); } .nav-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 6px; color: var(--kg-text-muted); display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .nav-btn:hover { background: var(--kg-surface); color: var(--kg-text); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .weekday { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--kg-text-muted); padding-bottom: 0.5rem; } .day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; cursor: pointer; border-radius: 8px; transition: all 0.2s; color: var(--kg-text); } .day:hover:not(.other-month):not(.selected) { background: var(--kg-bg-secondary, rgba(0,0,0,0.05)); color: var(--kg-primary); transform: scale(1.1); z-index: 1; } .day.other-month { color: var(--kg-text-muted); opacity: 0.3; cursor: default; } .day.selected { background: var(--kg-primary); color: white; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .day.today { box-shadow: 0 0 0 2px var(--kg-primary) inset; color: var(--kg-primary); font-weight: 700; } .day.today.selected { color: white; border-color: rgba(255, 255, 255, 0.4); } .day.focused { background: var(--kg-surface); box-shadow: 0 0 0 2px var(--kg-primary) inset; } .day.selected.focused { background: var(--kg-primary); box-shadow: 0 0 0 2px rgba(255,255,255,0.4) inset; } .day.today.focused:not(.selected) { background: var(--kg-surface); } /* Time Picker Styles */ .time-picker { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--kg-border); display: flex; align-items: center; justify-content: center; gap: 8px; } .time-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; } .time-select { background: var(--kg-surface); border: 1px solid var(--kg-border); color: var(--kg-text); padding: 6px 8px; border-radius: 6px; font-weight: 700; outline: none; cursor: pointer; } .time-separator { font-weight: 700; font-size: 1.25rem; color: var(--kg-text-muted); } .day.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; background: transparent; color: var(--kg-text-muted); } /* Month/Year selector grids */ .selector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 0.5rem; } .selector-item { padding: 10px 4px; text-align: center; border-radius: 8px; cursor: pointer; font-size: 0.9rem; color: var(--kg-text); transition: all 0.2s; font-weight: 500; } .selector-item:hover { background: var(--kg-bg-secondary, rgba(0,0,0,0.05)); color: var(--kg-primary); transform: translateY(-1px); } .selector-item.selected { background: var(--kg-primary); color: white; font-weight: 700; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } `"
|
|
1691
1691
|
},
|
|
1692
|
+
{
|
|
1693
|
+
"kind": "method",
|
|
1694
|
+
"name": "willUpdate",
|
|
1695
|
+
"parameters": [
|
|
1696
|
+
{
|
|
1697
|
+
"name": "changedProperties"
|
|
1698
|
+
}
|
|
1699
|
+
]
|
|
1700
|
+
},
|
|
1701
|
+
{
|
|
1702
|
+
"kind": "method",
|
|
1703
|
+
"name": "_updateFormValue",
|
|
1704
|
+
"inheritedFrom": {
|
|
1705
|
+
"name": "FormAssociated",
|
|
1706
|
+
"module": "src/mixins/FormAssociated.js"
|
|
1707
|
+
}
|
|
1708
|
+
},
|
|
1692
1709
|
{
|
|
1693
1710
|
"kind": "method",
|
|
1694
1711
|
"name": "_handleOutsideClick",
|
|
@@ -1939,12 +1956,20 @@
|
|
|
1939
1956
|
"type": {
|
|
1940
1957
|
"text": "string"
|
|
1941
1958
|
},
|
|
1942
|
-
"default": "
|
|
1959
|
+
"default": "null",
|
|
1943
1960
|
"inheritedFrom": {
|
|
1944
1961
|
"name": "FormAssociated",
|
|
1945
1962
|
"module": "src/mixins/FormAssociated.js"
|
|
1946
1963
|
}
|
|
1947
1964
|
},
|
|
1965
|
+
{
|
|
1966
|
+
"kind": "field",
|
|
1967
|
+
"name": "_inputValue",
|
|
1968
|
+
"type": {
|
|
1969
|
+
"text": "string"
|
|
1970
|
+
},
|
|
1971
|
+
"default": "''"
|
|
1972
|
+
},
|
|
1948
1973
|
{
|
|
1949
1974
|
"type": {
|
|
1950
1975
|
"text": "string"
|
|
@@ -1998,14 +2023,6 @@
|
|
|
1998
2023
|
"module": "src/mixins/FormAssociated.js"
|
|
1999
2024
|
}
|
|
2000
2025
|
},
|
|
2001
|
-
{
|
|
2002
|
-
"kind": "method",
|
|
2003
|
-
"name": "_updateFormValue",
|
|
2004
|
-
"inheritedFrom": {
|
|
2005
|
-
"name": "FormAssociated",
|
|
2006
|
-
"module": "src/mixins/FormAssociated.js"
|
|
2007
|
-
}
|
|
2008
|
-
},
|
|
2009
2026
|
{
|
|
2010
2027
|
"kind": "method",
|
|
2011
2028
|
"name": "formResetCallback",
|
|
@@ -30,7 +30,6 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
|
|
|
30
30
|
border: 1px solid var(--kg-border);
|
|
31
31
|
color: var(--kg-text);
|
|
32
32
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
33
|
-
overflow: hidden;
|
|
34
33
|
display: flex;
|
|
35
34
|
flex-direction: column;
|
|
36
35
|
}
|
|
@@ -41,6 +40,8 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
|
|
|
41
40
|
border-bottom: 1px solid var(--kg-border);
|
|
42
41
|
font-weight: 700;
|
|
43
42
|
font-size: 1.1rem;
|
|
43
|
+
border-top-left-radius: var(--kg-radius-lg, 12px);
|
|
44
|
+
border-top-right-radius: var(--kg-radius-lg, 12px);
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
.card-content {
|
|
@@ -54,6 +55,8 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
|
|
|
54
55
|
border-top: 1px solid var(--kg-border);
|
|
55
56
|
font-size: 0.9rem;
|
|
56
57
|
color: var(--kg-text-muted);
|
|
58
|
+
border-bottom-left-radius: var(--kg-radius-lg, 12px);
|
|
59
|
+
border-bottom-right-radius: var(--kg-radius-lg, 12px);
|
|
57
60
|
}
|
|
58
61
|
|
|
59
62
|
/* Variations */
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as a,css as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as a,css as i,html as s}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},_inputValue:{state:!0},value:{type:Object,converter:{fromAttribute:e=>{if(!e)return null;const t=new Date(e);return isNaN(t.getTime())?e:t},toAttribute:e=>e instanceof Date?e.toISOString():e}}}}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=null,this._inputValue="",this._handleOutsideClick=this._handleOutsideClick.bind(this)}willUpdate(e){if(e.has("value"))if(this.value instanceof Date&&!isNaN(this.value.getTime()))this._selectedDate=this.value,this._viewDate=new Date(this.value),this._inputValue=this._formatValue(this.value);else if(this.value){if("string"==typeof this.value){const e=this._parseDateStr(this.value);e&&!isNaN(e.getTime())?(this._selectedDate=e,this._viewDate=new Date(e),this._inputValue=this._formatValue(e)):this._inputValue=this.value}}else this._selectedDate=null,this._inputValue=""}_updateFormValue(){if(this.internals){let e=this.value;e instanceof Date&&(e=e.toISOString()),this.internals.setFormValue(e||"")}}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),i=t.find(e=>"literal"===e.type);let s=i?i.value:".";return s=s.includes(".")?".":s.includes("/")?"/":s.includes("-")?"-":".",{parts:a,separator:s}}_handleManualInput(e){let t=e.detail.value;t=t.replace(/\D/g,"");const{parts:a,separator:i}=this._getDateFormat(),s="year"===a[0];let r="";if(t.length>0&&(s?t.length<=4?r=t:t.length<=6?r=`${t.slice(0,4)}${i}${t.slice(4)}`:t.length<=8&&(r=`${t.slice(0,4)}${i}${t.slice(4,6)}${i}${t.slice(6)}`):t.length<=2?r=t:t.length<=4?r=`${t.slice(0,2)}${i}${t.slice(2)}`:t.length<=8&&(r=`${t.slice(0,2)}${i}${t.slice(2,4)}${i}${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(s)o=parseInt(t.slice(0,4)),n=parseInt(t.slice(4,6)),e=parseInt(t.slice(6,8));else{const i=parseInt(t.slice(0,2)),s=parseInt(t.slice(2,4)),r=parseInt(t.slice(4,8));"day"===a[0]?(e=i,n=s,o=r):(n=i,e=s,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=s?`${d}${i}${c}${i}${l}`:"day"===a[0]?`${l}${i}${c}${i}${d}`:`${c}${i}${l}${i}${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 i=String(e).padStart(2,"0"),s=String(a).padStart(2,"0");t.length<=10?r+=` ${i}`:r+=` ${i}:${s}`}}if(this._inputValue=r||t,this._inputValue.length>=8){const e=this._inputValue.split(" ")[0].split(i),t=this._inputValue.split(" ")[1]?.split(":")||[];if(3===e.length){let i,r,n;s?(n=parseInt(e[0]),r=parseInt(e[1]),i=parseInt(e[2])):"day"===a[0]?(i=parseInt(e[0]),r=parseInt(e[1]),n=parseInt(e[2])):(r=parseInt(e[0]),i=parseInt(e[1]),n=parseInt(e[2]));let o=0,l=0;if(t.length>=2&&(o=parseInt(t[0]),l=parseInt(t[1])),n>999){let e=new Date(n,r-1,i,o,l);if(!isNaN(e.getTime())){if(this.min){const t=this._parseDateStr(this.min);t&&new Date(e.getFullYear(),e.getMonth(),e.getDate())<new Date(t.getFullYear(),t.getMonth(),t.getDate())&&(e=new Date(t))}if(this.max){const t=this._parseDateStr(this.max);t&&new Date(e.getFullYear(),e.getMonth(),e.getDate())>new Date(t.getFullYear(),t.getMonth(),t.getDate())&&(e=new Date(t))}this._viewDate=e,this._selectedDate=e,this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value,date:this._selectedDate},bubbles:!0,composed:!0}))}}}}else""===this._inputValue&&(this.value=null,this.dispatchEvent(new CustomEvent("change",{detail:{value:null,date:null},bubbles:!0,composed:!0})));this.requestUpdate()}_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=a,this._inputValue=this._formatValue(a)}}_formatValue(e){if(!e)return"";const{separator:t,parts:a}=this._getDateFormat(),i=String(e.getDate()).padStart(2,"0"),s=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getFullYear());let n="";return n="year"===a[0]?`${r}${t}${s}${t}${i}`:"day"===a[0]?`${i}${t}${s}${t}${r}`:`${s}${t}${i}${t}${r}`,"year"===this.mode?String(r):"month"===this.mode?`${s}${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),i=new Date(e.getFullYear(),e.getMonth(),e.getDate());return!!(t&&i<new Date(t.getFullYear(),t.getMonth(),t.getDate()))||!!(a&&i>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=a,this._inputValue=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=t,this._inputValue=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=t,this._inputValue=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(),i=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 s=0;s<7;s++){const e=new Date(2024,0,7+s+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 s=l-1;s>=0;s--)h.push({day:d-s,current:!1});for(let s=1;s<=c;s++)h.push({day:s,current:!0});const p=42-h.length;for(let s=1;s<=p;s++)h.push({day:s,current:!1});const u=/* @__PURE__ */(new Date).getFullYear(),g=[];for(let s=u-50;s<=u+50;s++)g.push(s);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 s`
|
|
2
2
|
<div class="calendar-header">
|
|
3
3
|
<button class="nav-btn" @click="${e=>{e.stopPropagation(),this._changeMonth(-1)}}">←</button>
|
|
4
4
|
<div class="month-year">
|
|
5
5
|
<select class="header-select" @click="${e=>e.stopPropagation()}" @change="${e=>this._setViewMonth(e.target.value)}">
|
|
6
|
-
${
|
|
6
|
+
${i.map((e,a)=>s`<option value="${a}" ?selected="${a===t}">${e}</option>`)}
|
|
7
7
|
</select>
|
|
8
8
|
<select class="header-select" @click="${e=>e.stopPropagation()}" @change="${e=>this._setViewYear(e.target.value)}">
|
|
9
|
-
${
|
|
9
|
+
${g.map(t=>s`<option value="${t}" ?selected="${t===e}">${t}</option>`)}
|
|
10
10
|
</select>
|
|
11
11
|
</div>
|
|
12
12
|
<button class="nav-btn" @click="${e=>{e.stopPropagation(),this._changeMonth(1)}}">→</button>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="calendar-grid">
|
|
15
|
-
${o.map(e=>
|
|
16
|
-
${h.map(s
|
|
17
|
-
<div class="${r({day:!0,"other-month":!
|
|
18
|
-
${
|
|
15
|
+
${o.map(e=>s`<div class="weekday">${e}</div>`)}
|
|
16
|
+
${h.map(i=>s`
|
|
17
|
+
<div class="${r({day:!0,"other-month":!i.current,today:i.current&&v(i.day),selected:i.current&&w(i.day),focused:i.current&&i.day===a,disabled:i.current&&this._isDisabled(new Date(e,t,i.day))})}" @click="${e=>{e.stopPropagation(),this._selectDate(i.day,i.current)}}">
|
|
18
|
+
${i.day}
|
|
19
19
|
</div>
|
|
20
20
|
`)}
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
|
-
${this.showTime?
|
|
23
|
+
${this.showTime?s`
|
|
24
24
|
<div class="time-picker" @click="${e=>e.stopPropagation()}">
|
|
25
25
|
<select class="time-select" @change="${e=>this._setTime("hour",e.target.value)}">
|
|
26
|
-
${Array.from({length:24},(e,t)=>
|
|
26
|
+
${Array.from({length:24},(e,t)=>s`
|
|
27
27
|
<option value="${t}" ?selected="${t===this._viewDate.getHours()}">
|
|
28
28
|
${String(t).padStart(2,"0")}
|
|
29
29
|
</option>
|
|
@@ -31,7 +31,7 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
|
|
|
31
31
|
</select>
|
|
32
32
|
<span class="time-separator">:</span>
|
|
33
33
|
<select class="time-select" @change="${e=>this._setTime("minute",e.target.value)}">
|
|
34
|
-
${Array.from({length:60},(e,t)=>
|
|
34
|
+
${Array.from({length:60},(e,t)=>s`
|
|
35
35
|
<option value="${t}" ?selected="${t===this._viewDate.getMinutes()}">
|
|
36
36
|
${String(t).padStart(2,"0")}
|
|
37
37
|
</option>
|
|
@@ -42,28 +42,28 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
|
|
|
42
42
|
|
|
43
43
|
<div style="margin-top: 1rem; border-top: 1px solid var(--kg-border); padding-top: 0.75rem; display: flex; justify-content: center; gap: 8px;">
|
|
44
44
|
<kg-button size="mini" basic fullwidth @click="${this._handleToday}">Bugün</kg-button>
|
|
45
|
-
${this.showTime?
|
|
45
|
+
${this.showTime?s`
|
|
46
46
|
<kg-button size="mini" color="primary" fullwidth @click="${this._handleDone}">Tamam</kg-button>
|
|
47
47
|
`:""}
|
|
48
48
|
</div>
|
|
49
|
-
`}_renderMonthView(){this._viewDate.getMonth();const e=Array.from({length:12},(e,t)=>{const a=new Date(2e3,t,1);return new Intl.DateTimeFormat(this.locale,{month:"long"}).format(a)}),t=this._viewDate.getFullYear(),a=[];for(let
|
|
49
|
+
`}_renderMonthView(){this._viewDate.getMonth();const e=Array.from({length:12},(e,t)=>{const a=new Date(2e3,t,1);return new Intl.DateTimeFormat(this.locale,{month:"long"}).format(a)}),t=this._viewDate.getFullYear(),a=[];for(let s=t-10;s<=t+10;s++)a.push(s);const i=e=>!!this._selectedDate&&e===this._selectedDate.getMonth()&&t===this._selectedDate.getFullYear();return s`
|
|
50
50
|
<div class="calendar-header">
|
|
51
51
|
<button class="nav-btn" @click="${e=>{e.stopPropagation(),this._setViewYear(t-1)}}">←</button>
|
|
52
52
|
<div class="month-year">
|
|
53
53
|
<select class="header-select" @click="${e=>e.stopPropagation()}" @change="${e=>this._setViewYear(e.target.value)}">
|
|
54
|
-
${a.map(e=>
|
|
54
|
+
${a.map(e=>s`<option value="${e}" ?selected="${e===t}">${e}</option>`)}
|
|
55
55
|
</select>
|
|
56
56
|
</div>
|
|
57
57
|
<button class="nav-btn" @click="${e=>{e.stopPropagation(),this._setViewYear(t+1)}}">→</button>
|
|
58
58
|
</div>
|
|
59
59
|
<div class="selector-grid">
|
|
60
|
-
${e.map((e,t)=>
|
|
61
|
-
<div class="selector-item ${
|
|
60
|
+
${e.map((e,t)=>s`
|
|
61
|
+
<div class="selector-item ${i(t)?"selected":""}" @click="${e=>{e.stopPropagation(),this._selectMonth(t)}}">
|
|
62
62
|
${e}
|
|
63
63
|
</div>
|
|
64
64
|
`)}
|
|
65
65
|
</div>
|
|
66
|
-
`}_renderYearView(){const e=this._viewDate.getFullYear(),t=12*Math.floor(e/12),a=[];for(let
|
|
66
|
+
`}_renderYearView(){const e=this._viewDate.getFullYear(),t=12*Math.floor(e/12),a=[];for(let s=0;s<12;s++)a.push(t+s);const i=e=>!!this._selectedDate&&e===this._selectedDate.getFullYear();return s`
|
|
67
67
|
<div class="calendar-header">
|
|
68
68
|
<button class="nav-btn" @click="${t=>{t.stopPropagation(),this._setViewYear(e-12)}}">←</button>
|
|
69
69
|
<div class="month-year">
|
|
@@ -72,13 +72,13 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
|
|
|
72
72
|
<button class="nav-btn" @click="${t=>{t.stopPropagation(),this._setViewYear(e+12)}}">→</button>
|
|
73
73
|
</div>
|
|
74
74
|
<div class="selector-grid">
|
|
75
|
-
${a.map(e=>
|
|
76
|
-
<div class="selector-item ${
|
|
75
|
+
${a.map(e=>s`
|
|
76
|
+
<div class="selector-item ${i(e)?"selected":""}" @click="${t=>{t.stopPropagation(),this._selectYear(e)}}">
|
|
77
77
|
${e}
|
|
78
78
|
</div>
|
|
79
79
|
`)}
|
|
80
80
|
</div>
|
|
81
|
-
`}render(){let e;return e="year"===this.mode?this._renderYearView():"month"===this.mode?this._renderMonthView():this._renderCalendar(),
|
|
81
|
+
`}render(){let e;return e="year"===this.mode?this._renderYearView():"month"===this.mode?this._renderMonthView():this._renderCalendar(),s`
|
|
82
82
|
<div
|
|
83
83
|
class="datepicker-trigger ${this.disabled?"disabled":""}"
|
|
84
84
|
@keydown="${this._handleKeydown}"
|
|
@@ -86,7 +86,7 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
|
|
|
86
86
|
>
|
|
87
87
|
<kg-input
|
|
88
88
|
.placeholder="${this.placeholder}"
|
|
89
|
-
.value="${this.
|
|
89
|
+
.value="${this._inputValue}"
|
|
90
90
|
.label="${this.label}"
|
|
91
91
|
.errorText="${this.errorText}"
|
|
92
92
|
?disabled="${this.disabled}"
|
|
@@ -109,7 +109,7 @@ var e,t=Object.defineProperty;import{LitElement as a,css as s,html as i}from"lit
|
|
|
109
109
|
<div class="${r({"datepicker-popup":!0,open:this.open})}">
|
|
110
110
|
${e}
|
|
111
111
|
</div>
|
|
112
|
-
`}}((e,a,
|
|
112
|
+
`}}((e,a,i)=>{a in e?t(e,a,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[a]=i})(o,"symbol"!=typeof(e="styles")?e+"":e,i`
|
|
113
113
|
:host {
|
|
114
114
|
display: inline-block;
|
|
115
115
|
width: 100%;
|