@lazhus/kg-ui 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/custom-elements.json
CHANGED
|
@@ -853,7 +853,7 @@
|
|
|
853
853
|
],
|
|
854
854
|
"superclass": {
|
|
855
855
|
"name": "LitElement",
|
|
856
|
-
"
|
|
856
|
+
"package": "lit"
|
|
857
857
|
},
|
|
858
858
|
"tagName": "kg-colorpicker",
|
|
859
859
|
"customElement": true
|
|
@@ -1528,7 +1528,7 @@
|
|
|
1528
1528
|
],
|
|
1529
1529
|
"superclass": {
|
|
1530
1530
|
"name": "LitElement",
|
|
1531
|
-
"
|
|
1531
|
+
"package": "lit"
|
|
1532
1532
|
},
|
|
1533
1533
|
"tagName": "kg-datepicker",
|
|
1534
1534
|
"customElement": true
|
|
@@ -2938,7 +2938,7 @@
|
|
|
2938
2938
|
],
|
|
2939
2939
|
"superclass": {
|
|
2940
2940
|
"name": "LitElement",
|
|
2941
|
-
"
|
|
2941
|
+
"package": "lit"
|
|
2942
2942
|
},
|
|
2943
2943
|
"tagName": "kg-radio-group",
|
|
2944
2944
|
"customElement": true
|
|
@@ -3548,7 +3548,7 @@
|
|
|
3548
3548
|
],
|
|
3549
3549
|
"superclass": {
|
|
3550
3550
|
"name": "LitElement",
|
|
3551
|
-
"
|
|
3551
|
+
"package": "lit"
|
|
3552
3552
|
},
|
|
3553
3553
|
"tagName": "kg-slider",
|
|
3554
3554
|
"customElement": true
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var e=Object.defineProperty,o=(o,
|
|
1
|
+
var e=Object.defineProperty,o=(o,i,r)=>((o,i,r)=>i in o?e(o,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[i]=r)(o,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as t}from"lit";import{F as s}from"../chunks/FormAssociated-Ca1JavvX.js";class a extends(s(i)){constructor(){super(),this.value="#1367FF",this.open=!1,this._presets=["#1367FF","#FF0000","#00FF00","#FFA500","#800080","#000000","#FFFFFF","#808080","#FFC0CB","#00FFFF","#FFFF00","#A52A2A","#3498db","#2ecc71","#e74c3c","#f1c40f","#9b59b6","#34495e"],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.open=!this.open}_selectColor(e){this.value=e,this._dispatchChange()}_handleInput(e){this.value=e.target.value,this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}render(){return t`
|
|
2
2
|
<div class="kg-color-container ${this.disabled?"disabled":""}" style="position: relative;">
|
|
3
|
-
${this.label?
|
|
3
|
+
${this.label?t`<span class="label-text">${this.label}</span>`:""}
|
|
4
4
|
|
|
5
5
|
<div class="picker-trigger" @click="${this._togglePopup}">
|
|
6
6
|
<div class="color-swatch" style="background-color: ${this.value}"></div>
|
|
@@ -9,7 +9,7 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
9
9
|
|
|
10
10
|
<div class="picker-popup ${this.open?"open":""}" @click="${e=>e.stopPropagation()}">
|
|
11
11
|
<div class="swatch-grid">
|
|
12
|
-
${this._presets.map(e=>
|
|
12
|
+
${this._presets.map(e=>t`
|
|
13
13
|
<div
|
|
14
14
|
class="preset-swatch"
|
|
15
15
|
style="background-color: ${e}"
|
|
@@ -31,7 +31,7 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
34
|
-
`}}o(
|
|
34
|
+
`}}o(a,"properties",{label:{type:String},open:{type:Boolean}}),o(a,"styles",r`
|
|
35
35
|
:host {
|
|
36
36
|
display: inline-block;
|
|
37
37
|
font-family: inherit;
|
|
@@ -173,4 +173,4 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
173
173
|
opacity: 0.5;
|
|
174
174
|
pointer-events: none;
|
|
175
175
|
}
|
|
176
|
-
`),"undefined"==typeof customElements||customElements.get("kg-colorpicker")||customElements.define("kg-colorpicker",
|
|
176
|
+
`),"undefined"==typeof customElements||customElements.get("kg-colorpicker")||customElements.define("kg-colorpicker",a);export{a as kgcolorpicker};
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[a]=s)(t,"symbol"!=typeof a?a+"":a,s);import{
|
|
1
|
+
var e=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[a]=s)(t,"symbol"!=typeof a?a+"":a,s);import{LitElement as a,css as s,html as i}from"lit";import{F as r}from"../chunks/FormAssociated-Ca1JavvX.js";class n extends(r(a)){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`
|
|
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
|
-
${s.map((e,a)=>
|
|
6
|
+
${s.map((e,a)=>i`<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=>i`<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
|
-
${
|
|
16
|
-
${
|
|
17
|
-
<div class="${classMap({day:!0,"other-month":!s.current,today:s.current&&
|
|
15
|
+
${n.map(e=>i`<div class="weekday">${e}</div>`)}
|
|
16
|
+
${d.map(s=>i`
|
|
17
|
+
<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)}}">
|
|
18
18
|
${s.day}
|
|
19
19
|
</div>
|
|
20
20
|
`)}
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
|
-
${this.showTime?
|
|
23
|
+
${this.showTime?i`
|
|
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)=>i`
|
|
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=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,con
|
|
|
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)=>i`
|
|
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=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,con
|
|
|
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?i`
|
|
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 i=t-10;i<=t+10;i++)a.push(i);const s=e=>!!this._selectedDate&&e===this._selectedDate.getMonth()&&t===this._selectedDate.getFullYear();return
|
|
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 i=t-10;i<=t+10;i++)a.push(i);const s=e=>!!this._selectedDate&&e===this._selectedDate.getMonth()&&t===this._selectedDate.getFullYear();return i`
|
|
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=>i`<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)=>
|
|
60
|
+
${e.map((e,t)=>i`
|
|
61
61
|
<div class="selector-item ${s(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 i=0;i<12;i++)a.push(t+i);const s=e=>!!this._selectedDate&&e===this._selectedDate.getFullYear();return
|
|
66
|
+
`}_renderYearView(){const e=this._viewDate.getFullYear(),t=12*Math.floor(e/12),a=[];for(let i=0;i<12;i++)a.push(t+i);const s=e=>!!this._selectedDate&&e===this._selectedDate.getFullYear();return i`
|
|
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=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,con
|
|
|
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=>
|
|
75
|
+
${a.map(e=>i`
|
|
76
76
|
<div class="selector-item ${s(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(),i`
|
|
82
82
|
<div
|
|
83
83
|
class="datepicker-trigger ${this.disabled?"disabled":""}"
|
|
84
84
|
@keydown="${this._handleKeydown}"
|
|
@@ -107,7 +107,7 @@ var e=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,con
|
|
|
107
107
|
<div class="${classMap({"datepicker-popup":!0,open:this.open})}">
|
|
108
108
|
${e}
|
|
109
109
|
</div>
|
|
110
|
-
`}}t(
|
|
110
|
+
`}}t(n,"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}}),t(n,"styles",s`
|
|
111
111
|
:host {
|
|
112
112
|
display: inline-block;
|
|
113
113
|
width: 100%;
|
|
@@ -346,4 +346,4 @@ var e=Object.defineProperty,t=(t,a,s)=>((t,a,s)=>a in t?e(t,a,{enumerable:!0,con
|
|
|
346
346
|
font-weight: 700;
|
|
347
347
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
|
|
348
348
|
}
|
|
349
|
-
`),"undefined"==typeof customElements||customElements.get("kg-datepicker")||customElements.define("kg-datepicker",
|
|
349
|
+
`),"undefined"==typeof customElements||customElements.get("kg-datepicker")||customElements.define("kg-datepicker",n);export{n as kgdatepicker};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{
|
|
1
|
+
var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as a}from"lit";import{F as o}from"../chunks/FormAssociated-Ca1JavvX.js";class l extends(o(i)){constructor(){super(),this.direction="vertical",this.value="",this.addEventListener("kg-radio-select",this._handleRadioSelect)}_handleRadioSelect(e){const t=e.detail.value;this.value=t,this._updateChildren(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_updateChildren(){this.querySelectorAll("kg-radio").forEach(e=>{e.checked=e.value===this.value})}firstUpdated(){this._updateChildren()}updated(e){e.has("value")&&this._updateChildren()}render(){return a`
|
|
2
2
|
<div class="kg-radio-group">
|
|
3
|
-
${this.label?
|
|
3
|
+
${this.label?a`<span class="group-label">${this.label}</span>`:""}
|
|
4
4
|
<div class="kg-radio-group-container ${this.direction}">
|
|
5
5
|
<slot></slot>
|
|
6
6
|
</div>
|
|
7
7
|
</div>
|
|
8
|
-
`}}t(
|
|
8
|
+
`}}t(l,"properties",{direction:{type:String},label:{type:String}}),t(l,"styles",r`
|
|
9
9
|
:host {
|
|
10
10
|
display: block;
|
|
11
11
|
}
|
|
@@ -34,4 +34,4 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
34
34
|
text-transform: uppercase;
|
|
35
35
|
letter-spacing: 0.05em;
|
|
36
36
|
}
|
|
37
|
-
`),"undefined"==typeof customElements||customElements.get("kg-radio-group")||customElements.define("kg-radio-group",
|
|
37
|
+
`),"undefined"==typeof customElements||customElements.get("kg-radio-group")||customElements.define("kg-radio-group",l);export{l as kgradiogroup};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{
|
|
1
|
+
var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as a}from"lit";import{F as s}from"../chunks/FormAssociated-Ca1JavvX.js";class n extends(s(i)){constructor(){super(),this.min=0,this.max=100,this.step=1,this.value=50,this.hideValue=!1,this.showPins=!1}_handleInput(e){this.value=Number(e.target.value),this.dispatchEvent(new CustomEvent("kg-input",{detail:{value:this.value},bubbles:!0,composed:!0}))}render(){const e=(this.value-this.min)/(this.max-this.min)*100,t=`--slider-active-color: ${i=this.color,i?i.startsWith("#")||i.startsWith("rgb")||i.startsWith("hsl")?i:{primary:"var(--kg-primary)",secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[i]||`var(--kg-${i}, ${i})`:"var(--kg-primary)"};`;var i;return a`
|
|
2
2
|
<div class="kg-slider-container ${this.disabled?"disabled":""}" style="${t}">
|
|
3
3
|
<div class="slider-header">
|
|
4
|
-
${this.label?
|
|
5
|
-
${this.hideValue?"":
|
|
4
|
+
${this.label?a`<label class="slider-label">${this.label}</label>`:""}
|
|
5
|
+
${this.hideValue?"":a`<span class="current-value">${this.value}</span>`}
|
|
6
6
|
</div>
|
|
7
7
|
<div class="slider-wrapper">
|
|
8
|
-
${this.showPins?
|
|
8
|
+
${this.showPins?a`
|
|
9
9
|
<div class="pins-container">
|
|
10
|
-
${[...Array(5)].map(()=>
|
|
10
|
+
${[...Array(5)].map(()=>a`<div class="pin"></div>`)}
|
|
11
11
|
</div>
|
|
12
12
|
`:""}
|
|
13
13
|
<div class="checked-track" style="width: ${e}%"></div>
|
|
@@ -22,7 +22,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
22
22
|
/>
|
|
23
23
|
</div>
|
|
24
24
|
</div>
|
|
25
|
-
`}}t(
|
|
25
|
+
`}}t(n,"properties",{min:{type:Number},max:{type:Number},step:{type:Number},label:{type:String},color:{type:String},hideValue:{type:Boolean,reflect:!0,attribute:"hide-value"},showPins:{type:Boolean,attribute:"show-pins"}}),t(n,"styles",r`
|
|
26
26
|
:host {
|
|
27
27
|
display: block;
|
|
28
28
|
margin: 1rem 0;
|
|
@@ -150,4 +150,4 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
150
150
|
opacity: 0.3;
|
|
151
151
|
border-radius: 50%;
|
|
152
152
|
}
|
|
153
|
-
`),"undefined"==typeof customElements||customElements.get("kg-slider")||customElements.define("kg-slider",
|
|
153
|
+
`),"undefined"==typeof customElements||customElements.get("kg-slider")||customElements.define("kg-slider",n);export{n as kgslider};
|