@logosphere-ui/core 0.0.0-alpha.28 → 0.0.0-alpha.30
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/dist/{chatbot-CwHf1eku.cjs → chatbot-BUYrJbTR.cjs} +1 -1
- package/dist/{chatbot-C2ileads.js → chatbot-Cb2ByNkE.js} +2 -2
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/{combobox-Cr6GM34H.js → combobox-G4TVTGS7.js} +1 -1
- package/dist/{combobox-D-czaZJp.cjs → combobox-kdjsT5eX.cjs} +1 -1
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-BXVXSlQE.cjs → datepicker-Cf3gLMsu.cjs} +1 -1
- package/dist/{datepicker-VKOb2Ugl.js → datepicker-n5dZbuCD.js} +1 -1
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/formfield-CRcyUMvQ.cjs +33 -0
- package/dist/{formfield-BKzHa2GA.js → formfield-O327HYt0.js} +6 -6
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/index.cjs +1 -119
- package/dist/index.js +47 -358
- package/dist/index.umd.js +31 -31
- package/dist/{input-CnogTmTf.js → input-BJtn_iTC.js} +1 -1
- package/dist/{input-D-FMDWyw.cjs → input-DPTTu8ZR.cjs} +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.js +1 -1
- package/dist/left-menu.cjs +1 -1
- package/dist/left-menu.js +1 -1
- package/dist/{leftmenu-C90G5yoR.js → leftmenu-DpES_nr1.js} +1 -1
- package/dist/{leftmenu-DRJDdM_-.cjs → leftmenu-RcrjiF7g.cjs} +1 -1
- package/dist/{text-area-DFwnyopP.cjs → text-area-BztUgBL1.cjs} +1 -1
- package/dist/{text-area-BMtZEphr.js → text-area-DUg5BGQh.js} +1 -1
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/timepicker-BKUTi_AU.js +316 -0
- package/dist/timepicker-CRtoPBMn.cjs +119 -0
- package/dist/timepicker.cjs +1 -0
- package/dist/timepicker.js +4 -0
- package/package.json +1 -1
- package/dist/formfield-DguRklXe.cjs +0 -33
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { unsafeCSS as m, css as f, LitElement as g, nothing as a, html as u } from "lit";
|
|
2
2
|
import { query as v, property as n, state as c, customElement as b } from "lit/decorators.js";
|
|
3
3
|
import { live as _ } from "lit/directives/live.js";
|
|
4
|
-
import "./formfield-
|
|
4
|
+
import "./formfield-O327HYt0.js";
|
|
5
5
|
import "./ui-icon-DrrH0WhF.js";
|
|
6
6
|
const E = ".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:16px}.input__field--large{height:24px}.input__clear-btn{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{color:var(--color-gray-600)}";
|
|
7
7
|
var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, s = (t, e, o, l) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const n=require("lit"),r=require("lit/decorators.js"),y=require("lit/directives/live.js");require("./formfield-
|
|
1
|
+
"use strict";const n=require("lit"),r=require("lit/decorators.js"),y=require("lit/directives/live.js");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-DKZMrOTi.cjs");const c=".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:16px}.input__field--large{height:24px}.input__clear-btn{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{color:var(--color-gray-600)}";var g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(p,e,t,s)=>{for(var i=s>1?void 0:s?m(e,t):e,l=p.length-1,a;l>=0;l--)(a=p[l])&&(i=(s?a(e,t,i):a(i))||i);return s&&i&&g(e,t,i),i};const d={0:/\d/,a:/[a-zA-Z]/,"*":/[a-zA-Z0-9]/};function h(p){return p.split("").filter(e=>/[a-zA-Z0-9]/.test(e)).join("")}function f(p,e){let t=0,s="";for(let i=0;i<e.length&&!(t>=p.length);i++){const l=e[i],a=d[l];if(a){for(;t<p.length&&!a.test(p[t]);)t++;t<p.length&&(s+=p[t++])}else s+=l}return s}function v(p,e,t){let s=0;for(let i=0;i<p.length;i++)if(d[e[i]]&&(s++,s===t))return i+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.mask="",this._internalError="",this._showPassword=!1,this.handleInput=e=>{const t=e.target;if(this.mask){const s=t.selectionStart??t.value.length,i=h(t.value.slice(0,s)).length,l=h(t.value),a=f(l,this.mask);t.value=a,this.value=a;const u=v(a,this.mask,i);requestAnimationFrame(()=>t.setSelectionRange(u,u))}else this.value=t.value;this._internalError&&(this._internalError="",this._inputElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,rawValue:this.mask?h(this.value):this.value,originalEvent:e}}))},this.handleChange=e=>{const t=e.target;this.value=t.value,t.checkValidity()||(this._internalError=t.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",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(e,t,s){this._inputElement?.setSelectionRange(e,t,s)}checkValidity(){return this._inputElement?.checkValidity()??!0}reportValidity(){return this._inputElement?.reportValidity()??!0}setCustomValidity(e){this._inputElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}willUpdate(e){e.has("type")&&this.type!=="password"&&this._showPassword&&(this._showPassword=!1)}get _effectivePlaceholder(){return this.placeholder?this.placeholder:this.mask?this.mask.replace(/[0a*]/g,"_"):""}render(){const e=this.error||this._internalError,t=!!this.value&&!this.disabled&&!this.readonly,s=this.type==="password",i=s&&this._showPassword?"text":this.type,l=`input__field input__field--${this.size}`;return n.html`
|
|
2
2
|
<logosphere-formfield
|
|
3
3
|
.label=${this.label}
|
|
4
4
|
.helper=${this.helper}
|
package/dist/input.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./input-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./input-DPTTu8ZR.cjs");Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>e.LogosphereInput});
|
package/dist/input.js
CHANGED
package/dist/left-menu.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./leftmenu-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./leftmenu-RcrjiF7g.cjs");Object.defineProperty(exports,"LeftMenu",{enumerable:!0,get:()=>e.LeftMenu});Object.defineProperty(exports,"LeftMenuItemElement",{enumerable:!0,get:()=>e.LeftMenuItemElement});
|
package/dist/left-menu.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement as u, html as p, unsafeCSS as v, css as b, nothing as y } from "lit";
|
|
2
2
|
import { property as c, customElement as g, state as m } from "lit/decorators.js";
|
|
3
3
|
import "./button-Uu9oaieg.js";
|
|
4
|
-
import "./input-
|
|
4
|
+
import "./input-BJtn_iTC.js";
|
|
5
5
|
import "./ui-icon-DrrH0WhF.js";
|
|
6
6
|
import "./tree-menu-5dkAPsgJ.js";
|
|
7
7
|
var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, _ = (e, t, i, s) => {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("lit"),r=require("lit/decorators.js");require("./button-DRZ4sG4T.cjs");require("./input-
|
|
1
|
+
"use strict";const a=require("lit"),r=require("lit/decorators.js");require("./button-DRZ4sG4T.cjs");require("./input-DPTTu8ZR.cjs");require("./ui-icon-DKZMrOTi.cjs");require("./tree-menu-CdNwvOjp.cjs");var u=Object.defineProperty,_=Object.getOwnPropertyDescriptor,p=(c,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,i=c.length-1,s;i>=0;i--)(s=c[i])&&(o=(n?s(e,t,o):s(o))||o);return n&&o&&u(e,t,o),o};exports.LeftMenuItemElement=class extends a.LitElement{constructor(){super(...arguments),this.itemId="",this.label="",this.disabled=!1,this.active=!1}render(){return a.html`<slot></slot>`}};p([r.property({type:String})],exports.LeftMenuItemElement.prototype,"itemId",2);p([r.property({type:String})],exports.LeftMenuItemElement.prototype,"label",2);p([r.property({type:Boolean})],exports.LeftMenuItemElement.prototype,"disabled",2);p([r.property({type:Boolean})],exports.LeftMenuItemElement.prototype,"active",2);p([r.property({attribute:!1})],exports.LeftMenuItemElement.prototype,"onClick",2);exports.LeftMenuItemElement=p([r.customElement("leftmenu-item")],exports.LeftMenuItemElement);const g=':host{display:block;position:relative;height:100%;font-family:var(--font-family-base)}.lm{position:relative;height:100%;transition:width var(--transition-speed-base) var(--transition-timing)}.lm__panel{width:var(--lm-closed-width);min-width:var(--lm-closed-width);height:100%;background:var(--color-body-bg);border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;overflow-x:hidden;box-sizing:border-box;transition:width var(--transition-speed-base) var(--transition-timing),min-width var(--transition-speed-base) var(--transition-timing),box-shadow var(--transition-speed-base) var(--transition-timing)}.lm--open .lm__panel{width:var(--lm-open-width);min-width:var(--lm-open-width)}.lm--overlay.lm--open .lm__panel{position:absolute;left:0;top:0;box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown)}.lm__brand{padding:var(--spacing-3);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.lm--closed .lm__brand{width:64px;height:64px;padding:0}.lm__search{padding:var(--spacing-4) var(--spacing-3)}.lm__nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-3);scrollbar-width:thin}.lm__nav logosphere-tree-menu{width:100%}.lm__custom{border-top:1px solid var(--color-border);margin-top:var(--spacing-4);padding:var(--spacing-2)}.lm--closed .lm__custom{padding:var(--spacing-2) 0}.lm__custom--hidden{display:none}.lm--closed .lm__nav{padding-left:0;padding-right:0;scrollbar-gutter:auto;scrollbar-color:var(--color-border) transparent}.lm--closed .lm__nav::-webkit-scrollbar{width:4px;height:4px}.lm--closed .lm__nav::-webkit-scrollbar-track{background:transparent}.lm--closed .lm__nav::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:999px}.lm--closed .lm__nav:hover::-webkit-scrollbar-thumb{background-color:var(--color-tertiary)}.lm__footer{margin-top:auto;border-top:1px solid var(--color-border);padding:var(--spacing-2);display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}.lm--closed .lm__footer{flex-direction:column;justify-content:center}.lm__ctrl{width:32px;height:32px;border:1px solid var(--color-border);background:var(--color-body-bg);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-body-color)}.lm__ctrl:hover{background:var(--color-tertiary)}.lm__pin-icon--inactive{color:var(--color-tertiary)}.lm__pin-icon--active{color:var(--color-body-color)}.lm__toggle-icon{transform:rotate(180deg);transition:transform var(--transition-speed-base) var(--transition-timing)}.lm__toggle-icon--open{transform:rotate(0)}::slotted(leftmenu-item){display:none!important}::slotted([slot="logo-open"]),::slotted([slot="logo-closed"]){display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%}::slotted([slot="custom-open"]),::slotted([slot="custom-closed"]){display:block;width:100%}';var f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,d=(c,e,t,n)=>{for(var o=n>1?void 0:n?v(e,t):e,i=c.length-1,s;i>=0;i--)(s=c[i])&&(o=(n?s(e,t,o):s(o))||o);return n&&o&&f(e,t,o),o};exports.LeftMenu=class extends a.LitElement{constructor(){super(...arguments),this.open=!1,this.pinned=!1,this.closedWidth=64,this.openWidth=248,this.storageKey="logosphere-leftmenu-state",this._nodes=[],this._expandedIds=new Set,this._search="",this._searchExpandedIds=new Set,this._hasCustomOpen=!1,this._hasCustomClosed=!1,this._isHydratingState=!1,this._onSlotChange=e=>{const n=e.target.assignedElements({flatten:!0}).filter(o=>o.tagName==="LEFTMENU-ITEM");this._nodes=n.map((o,i)=>this._mapItemElement(o,`root-${i}`))},this._onCustomOpenSlotChange=e=>{const t=e.target;this._hasCustomOpen=t.assignedElements({flatten:!0}).length>0},this._onCustomClosedSlotChange=e=>{const t=e.target;this._hasCustomClosed=t.assignedElements({flatten:!0}).length>0},this._handleSearchInput=e=>{const n=e.detail?.value;typeof n=="string"&&this._setSearch(n)},this._toggleOpen=()=>{this.open=!this.open},this._togglePin=()=>{this.pinned=!this.pinned,this.dispatchEvent(new CustomEvent("pin-change",{detail:{pinned:this.pinned},bubbles:!0,composed:!0}))},this._handleTreeToggle=e=>{e.stopPropagation();const{item:t,expanded:n}=e.detail;n?this._expandedIds.add(t.id):this._expandedIds.delete(t.id),this._expandedIds=new Set(this._expandedIds)},this._handleTreeNodeClick=e=>{this.open||!e.detail.hasChildren||(this.open=!0,this._expandedIds.add(e.detail.item.id),this._expandedIds=new Set(this._expandedIds))},this._handleTreeItemClick=e=>{e.stopPropagation();const t=e.detail.item.data;this.dispatchEvent(new CustomEvent("item-click",{detail:{item:t??e.detail.item},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this._loadPersistedState()}updated(e){this._isHydratingState||(e.has("open")||e.has("pinned"))&&this._persistState()}_loadPersistedState(){if(!(typeof window>"u"))try{const e=window.localStorage.getItem(this.storageKey);if(!e)return;const t=JSON.parse(e);this._isHydratingState=!0,typeof t.open=="boolean"&&(this.open=t.open),typeof t.pinned=="boolean"&&(this.pinned=t.pinned),this._isHydratingState=!1}catch{this._isHydratingState=!1}}_persistState(){if(!(typeof window>"u"))try{window.localStorage.setItem(this.storageKey,JSON.stringify({open:this.open,pinned:this.pinned}))}catch{}}_mapItemElement(e,t){const n=e.itemId||e.id||t,o=Array.from(e.children).find(l=>l.getAttribute("slot")==="icon"),i=o?.querySelector("ui-icon"),s=Array.from(e.children).filter(l=>l.tagName==="LEFTMENU-ITEM"&&l.getAttribute("slot")==="children"),h=Array.from(e.childNodes).filter(l=>l.nodeType===Node.TEXT_NODE).map(l=>l.textContent??"").join(" ").replace(/\s+/g," ").trim();return{id:n,label:(e.label||h||n).trim(),disabled:e.disabled,active:e.active,iconName:i?.getAttribute("name")??null,iconHtml:o?o.innerHTML:null,onClick:e.onClick?()=>e.onClick?.(e):void 0,children:s.map((l,m)=>this._mapItemElement(l,`${n}-${m}`))}}_setSearch(e){if(this._search=e,!e){this._searchExpandedIds=new Set;return}const t=new Set,n=o=>{let i=!1;return o.forEach(s=>{const h=s.label.toLocaleLowerCase().includes(e.toLocaleLowerCase()),l=n(s.children);l&&t.add(s.id),h&&s.children.length&&t.add(s.id),i=i||h||l}),i};n(this._nodes),this._searchExpandedIds=t}_filterNodes(e,t){if(!t)return e;const n=t.toLocaleLowerCase(),o=i=>{const s=i.children.map(o).filter(Boolean);return!i.label.toLocaleLowerCase().includes(n)&&s.length===0?null:{...i,children:s}};return e.map(o).filter(Boolean)}_toTreeItems(e){return e.map(t=>({id:t.id,label:t.label,disabled:t.disabled,active:t.active,iconName:t.iconName??void 0,iconHtml:t.iconHtml,onClick:t.onClick?()=>{t.onClick?.(t)}:void 0,data:t,children:this._toTreeItems(t.children)}))}_effectiveExpandedIds(){const e=new Set(this._expandedIds);return this._search&&this._searchExpandedIds.forEach(t=>e.add(t)),Array.from(e)}render(){const e=this._filterNodes(this._nodes,this._search),t=this._toTreeItems(e),n=this.pinned?this.open?this.openWidth:this.closedWidth:this.closedWidth;return a.html`
|
|
2
2
|
<aside
|
|
3
3
|
class="lm ${this.open?"lm--open":"lm--closed"} ${this.pinned?"lm--pinned":"lm--overlay"}"
|
|
4
4
|
style=${`--lm-open-width:${this.openWidth}px; --lm-closed-width:${this.closedWidth}px; width:${n}px;`}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js");require("./formfield-
|
|
1
|
+
"use strict";const i=require("lit"),t=require("lit/decorators.js"),p=require("lit/directives/live.js");require("./formfield-CRcyUMvQ.cjs");require("./ui-icon-DKZMrOTi.cjs");const u=".textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;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);box-sizing:border-box}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";var d=Object.defineProperty,c=Object.getOwnPropertyDescriptor,r=(n,e,a,s)=>{for(var o=s>1?void 0:s?c(e,a):e,l=n.length-1,h;l>=0;l--)(h=n[l])&&(o=(s?h(e,a,o):h(o))||o);return s&&o&&d(e,a,o),o};exports.TextArea=class extends i.LitElement{constructor(){super(...arguments),this.value="",this.placeholder="",this.name="",this.autocomplete="",this.rows=3,this.maxRows=8,this.wrap="soft",this.resize="vertical",this.autoResize=!0,this.size="default",this.variant="default",this.label="",this.helper="",this.error="",this.required=!1,this.disabled=!1,this.readonly=!1,this._internalError="",this._charCount=0,this.handleInput=e=>{const a=e.target;this.value=a.value,this._charCount=this.value.length,this.autoResize&&this.adjustHeight(),this._internalError&&(this._internalError="",this._textareaElement.setCustomValidity("")),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleChange=e=>{const a=e.target;this.value=a.value,a.checkValidity()||(this._internalError=a.validationMessage),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,originalEvent:e}}))},this.handleKeyDown=e=>{this.dispatchEvent(new CustomEvent("keydown",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleKeyUp=e=>{this.dispatchEvent(new CustomEvent("keyup",{bubbles:!0,composed:!0,detail:{key:e.key,originalEvent:e}}))},this.handleClear=()=>{this.value="",this._charCount=0,this._textareaElement&&(this._textareaElement.value="",this.autoResize&&this.adjustHeight()),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:"",originalEvent:null}}))}}get textareaElement(){return this._textareaElement}focus(){this._textareaElement?.focus()}blur(){this._textareaElement?.blur()}select(){this._textareaElement?.select()}setSelectionRange(e,a,s){this._textareaElement?.setSelectionRange(e,a,s)}checkValidity(){return this._textareaElement?.checkValidity()??!0}reportValidity(){return this._textareaElement?.reportValidity()??!0}setCustomValidity(e){this._textareaElement?.setCustomValidity(e),this._internalError=e,this.requestUpdate()}adjustHeight(){if(!this.autoResize||!this._textareaElement)return;const e=this._textareaElement;e.style.height="",e.style.overflow="hidden";const a=e.scrollHeight;if(a!==0){if(this.maxRows>0){const s=parseFloat(getComputedStyle(e).lineHeight)||20,o=Math.round(s*this.maxRows);if(a>=o){e.style.height=`${o}px`,e.style.overflow="auto";return}}e.style.height=`${a}px`}}getResizeClass(){return this.autoResize?"textarea__field--auto-resize":{none:"textarea__field--resize-none",vertical:"textarea__field--resize-vertical",horizontal:"textarea__field--resize-horizontal",both:"textarea__field--resize-both"}[this.resize]}firstUpdated(){this._charCount=this.value.length,this.autoResize&&requestAnimationFrame(()=>this.adjustHeight())}updated(e){super.updated(e),e.has("value")&&(this._charCount=this.value.length,this.autoResize&&this.adjustHeight())}getWrapClass(){return this.autoResize||this.resize==="none"?"textarea__wrap textarea__wrap--no-grip":"textarea__wrap"}render(){const e=this.error||this._internalError,a=!!this.value&&!this.disabled&&!this.readonly,s=this.maxlength!=null,o=`textarea__field ${this.getResizeClass()}`;return i.html`
|
|
2
2
|
<logosphere-formfield
|
|
3
3
|
.label=${this.label}
|
|
4
4
|
.helper=${this.helper}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { unsafeCSS as c, css as y, LitElement as m, nothing as n, html as u } from "lit";
|
|
2
2
|
import { query as _, property as i, state as d, customElement as x } from "lit/decorators.js";
|
|
3
3
|
import { live as g } from "lit/directives/live.js";
|
|
4
|
-
import "./formfield-
|
|
4
|
+
import "./formfield-O327HYt0.js";
|
|
5
5
|
import "./ui-icon-DrrH0WhF.js";
|
|
6
6
|
const f = ".textarea__wrap{position:relative;flex:1;min-width:0}.textarea__field{display:block;width:100%;background:transparent;border:none;outline:none;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);box-sizing:border-box}.textarea__field::placeholder{color:var(--color-tertiary)}.textarea__field:disabled{cursor:not-allowed}.textarea__field--resize-none{resize:none}.textarea__field--resize-vertical{resize:vertical}.textarea__field--resize-horizontal{resize:horizontal}.textarea__field--resize-both{resize:both}.textarea__field--auto-resize{resize:none;overflow:hidden}.textarea__counter{position:absolute;bottom:5px;right:18px;font-size:11px;font-weight:var(--font-weight-medium);line-height:1rem;letter-spacing:-.11px;color:var(--color-secondary);background-color:var(--color-light-bg-2);border-radius:var(--radius-sm, 4px);padding:0 var(--spacing-1);white-space:nowrap;-webkit-user-select:none;user-select:none;pointer-events:none}.textarea__wrap--no-grip .textarea__counter{right:4px}.textarea__clear-btn{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;outline:none;line-height:0;transition:color var(--transition-speed-fast) var(--transition-timing)}.textarea__clear-btn:hover{color:var(--color-body-text)}";
|
|
7
7
|
var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (e, a, s, o) => {
|
package/dist/textarea.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./text-area-BztUgBL1.cjs");Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>e.TextArea});
|
package/dist/textarea.js
CHANGED
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
import { unsafeCSS as d, css as _, LitElement as m, html as h } from "lit";
|
|
2
|
+
import { property as s, state as c, query as u, customElement as v } from "lit/decorators.js";
|
|
3
|
+
import { createPopper as b } from "@popperjs/core";
|
|
4
|
+
import "./input-BJtn_iTC.js";
|
|
5
|
+
import "./ui-icon-DrrH0WhF.js";
|
|
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
|
+
var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, n, a) => {
|
|
8
|
+
for (var o = a > 1 ? void 0 : a ? y(r, n) : r, p = t.length - 1, l; p >= 0; p--)
|
|
9
|
+
(l = t[p]) && (o = (a ? l(r, n, o) : l(o)) || o);
|
|
10
|
+
return a && o && f(r, n, o), o;
|
|
11
|
+
};
|
|
12
|
+
let e = class extends m {
|
|
13
|
+
constructor() {
|
|
14
|
+
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 = (t) => {
|
|
15
|
+
this._isOpen && !t.composedPath().includes(this) && (this._isOpen = !1);
|
|
16
|
+
}, this._handleInputChange = (t) => {
|
|
17
|
+
t.stopPropagation();
|
|
18
|
+
const r = t.detail?.value ?? "";
|
|
19
|
+
if (/^\d{2}:\d{2}$/.test(r)) {
|
|
20
|
+
const [n, a] = this._parseValue(r);
|
|
21
|
+
this._hour = n, this._minute = a;
|
|
22
|
+
const o = `${this._pad(n)}:${this._pad(a)}`;
|
|
23
|
+
this.value = o, this._emit(o);
|
|
24
|
+
}
|
|
25
|
+
}, this._handleInputClear = (t) => {
|
|
26
|
+
t.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
|
|
27
|
+
}, this._incrementHour = () => {
|
|
28
|
+
this._hour = (this._hour + 1) % 24, this._syncValue();
|
|
29
|
+
}, this._decrementHour = () => {
|
|
30
|
+
this._hour = (this._hour - 1 + 24) % 24, this._syncValue();
|
|
31
|
+
}, this._incrementMinute = () => {
|
|
32
|
+
this._minute = (this._minute + 1) % 60, this._syncValue();
|
|
33
|
+
}, this._decrementMinute = () => {
|
|
34
|
+
this._minute = (this._minute - 1 + 60) % 60, this._syncValue();
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
// ── Lifecycle ───────────────────────────────────────────────────────────────
|
|
38
|
+
connectedCallback() {
|
|
39
|
+
super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
|
|
40
|
+
}
|
|
41
|
+
disconnectedCallback() {
|
|
42
|
+
super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._destroyPopper();
|
|
43
|
+
}
|
|
44
|
+
willUpdate(t) {
|
|
45
|
+
if (t.has("value") && /^\d{1,2}:\d{2}$/.test(this.value)) {
|
|
46
|
+
const [r, n] = this._parseValue(this.value);
|
|
47
|
+
this._hour = r, this._minute = n;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
updated(t) {
|
|
51
|
+
t.has("_isOpen") && (this._isOpen ? this.updateComplete.then(() => {
|
|
52
|
+
this._showPopover(), this._updatePopper();
|
|
53
|
+
}) : (this._hidePopover(), this._destroyPopper()));
|
|
54
|
+
}
|
|
55
|
+
// ── Value helpers ───────────────────────────────────────────────────────────
|
|
56
|
+
_parseValue(t) {
|
|
57
|
+
const r = t.match(/^(\d{1,2}):(\d{2})$/);
|
|
58
|
+
return r ? [
|
|
59
|
+
Math.min(23, Math.max(0, parseInt(r[1], 10))),
|
|
60
|
+
Math.min(59, Math.max(0, parseInt(r[2], 10)))
|
|
61
|
+
] : [0, 0];
|
|
62
|
+
}
|
|
63
|
+
_pad(t) {
|
|
64
|
+
return String(t).padStart(2, "0");
|
|
65
|
+
}
|
|
66
|
+
// ── Popper / Popover ────────────────────────────────────────────────────────
|
|
67
|
+
_updatePopper() {
|
|
68
|
+
!this._referenceEl || !this._popupEl || (this._popperInstance = b(this._referenceEl, this._popupEl, {
|
|
69
|
+
placement: "bottom-start",
|
|
70
|
+
modifiers: [
|
|
71
|
+
{ name: "offset", options: { offset: [0, 4] } },
|
|
72
|
+
{ name: "flip", options: { fallbackPlacements: ["top-start"] } },
|
|
73
|
+
{
|
|
74
|
+
name: "preventOverflow",
|
|
75
|
+
options: { boundary: document.documentElement, padding: 8 }
|
|
76
|
+
}
|
|
77
|
+
]
|
|
78
|
+
}));
|
|
79
|
+
}
|
|
80
|
+
_destroyPopper() {
|
|
81
|
+
this._popperInstance?.destroy(), this._popperInstance = void 0;
|
|
82
|
+
}
|
|
83
|
+
_showPopover() {
|
|
84
|
+
this._popupEl?.showPopover?.();
|
|
85
|
+
}
|
|
86
|
+
_hidePopover() {
|
|
87
|
+
const t = this._popupEl;
|
|
88
|
+
try {
|
|
89
|
+
t?.hidePopover?.();
|
|
90
|
+
} catch {
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
_togglePopup() {
|
|
94
|
+
if (!(this.disabled || this.readonly))
|
|
95
|
+
if (this._isOpen)
|
|
96
|
+
this._isOpen = !1;
|
|
97
|
+
else {
|
|
98
|
+
const [t, r] = this._parseValue(this.value);
|
|
99
|
+
this._hour = t, this._minute = r, this._isOpen = !0;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
_clearValue(t) {
|
|
103
|
+
t?.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
|
|
104
|
+
}
|
|
105
|
+
_setNow() {
|
|
106
|
+
const t = /* @__PURE__ */ new Date();
|
|
107
|
+
this._hour = t.getHours(), this._minute = t.getMinutes(), this._syncValue();
|
|
108
|
+
}
|
|
109
|
+
_emit(t) {
|
|
110
|
+
this.onChange?.(t), this.dispatchEvent(new CustomEvent("change", {
|
|
111
|
+
bubbles: !0,
|
|
112
|
+
composed: !0,
|
|
113
|
+
detail: { value: t }
|
|
114
|
+
}));
|
|
115
|
+
}
|
|
116
|
+
_syncValue() {
|
|
117
|
+
const t = `${this._pad(this._hour)}:${this._pad(this._minute)}`;
|
|
118
|
+
this.value = t, this._emit(t);
|
|
119
|
+
}
|
|
120
|
+
_startSpin(t) {
|
|
121
|
+
t(), this._spinInterval = setInterval(t, 120);
|
|
122
|
+
}
|
|
123
|
+
_stopSpin() {
|
|
124
|
+
clearInterval(this._spinInterval), this._spinInterval = void 0;
|
|
125
|
+
}
|
|
126
|
+
// ── Render ──────────────────────────────────────────────────────────────────
|
|
127
|
+
_renderPopup() {
|
|
128
|
+
return h`
|
|
129
|
+
<div data-timepicker-popup popover="manual" class="timepicker__popup">
|
|
130
|
+
<div class="timepicker__spinner">
|
|
131
|
+
<!-- Sol sütun: saat -->
|
|
132
|
+
<div class="timepicker__col timepicker__col--left">
|
|
133
|
+
<button
|
|
134
|
+
class="timepicker__spin-btn"
|
|
135
|
+
@mousedown=${() => this._startSpin(this._incrementHour)}
|
|
136
|
+
@mouseup=${this._stopSpin}
|
|
137
|
+
@mouseleave=${this._stopSpin}
|
|
138
|
+
@touchstart=${(t) => {
|
|
139
|
+
t.preventDefault(), this._startSpin(this._incrementHour);
|
|
140
|
+
}}
|
|
141
|
+
@touchend=${this._stopSpin}
|
|
142
|
+
tabindex="-1"
|
|
143
|
+
aria-label="Saat artır"
|
|
144
|
+
><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
|
|
145
|
+
<div class="timepicker__time-unit">${this._pad(this._hour)}</div>
|
|
146
|
+
<button
|
|
147
|
+
class="timepicker__spin-btn"
|
|
148
|
+
@mousedown=${() => this._startSpin(this._decrementHour)}
|
|
149
|
+
@mouseup=${this._stopSpin}
|
|
150
|
+
@mouseleave=${this._stopSpin}
|
|
151
|
+
@touchstart=${(t) => {
|
|
152
|
+
t.preventDefault(), this._startSpin(this._decrementHour);
|
|
153
|
+
}}
|
|
154
|
+
@touchend=${this._stopSpin}
|
|
155
|
+
tabindex="-1"
|
|
156
|
+
aria-label="Saat azalt"
|
|
157
|
+
><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<!-- Orta sütun: iki nokta -->
|
|
161
|
+
<div class="timepicker__col timepicker__col--sep">
|
|
162
|
+
<div class="timepicker__colon">:</div>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<!-- Sağ sütun: dakika -->
|
|
166
|
+
<div class="timepicker__col timepicker__col--right">
|
|
167
|
+
<button
|
|
168
|
+
class="timepicker__spin-btn"
|
|
169
|
+
@mousedown=${() => this._startSpin(this._incrementMinute)}
|
|
170
|
+
@mouseup=${this._stopSpin}
|
|
171
|
+
@mouseleave=${this._stopSpin}
|
|
172
|
+
@touchstart=${(t) => {
|
|
173
|
+
t.preventDefault(), this._startSpin(this._incrementMinute);
|
|
174
|
+
}}
|
|
175
|
+
@touchend=${this._stopSpin}
|
|
176
|
+
tabindex="-1"
|
|
177
|
+
aria-label="Dakika artır"
|
|
178
|
+
><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
|
|
179
|
+
<div class="timepicker__time-unit">${this._pad(this._minute)}</div>
|
|
180
|
+
<button
|
|
181
|
+
class="timepicker__spin-btn"
|
|
182
|
+
@mousedown=${() => this._startSpin(this._decrementMinute)}
|
|
183
|
+
@mouseup=${this._stopSpin}
|
|
184
|
+
@mouseleave=${this._stopSpin}
|
|
185
|
+
@touchstart=${(t) => {
|
|
186
|
+
t.preventDefault(), this._startSpin(this._decrementMinute);
|
|
187
|
+
}}
|
|
188
|
+
@touchend=${this._stopSpin}
|
|
189
|
+
tabindex="-1"
|
|
190
|
+
aria-label="Dakika azalt"
|
|
191
|
+
><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<!-- Action buttons -->
|
|
196
|
+
<div class="timepicker__actions">
|
|
197
|
+
<button
|
|
198
|
+
class="timepicker__action-btn"
|
|
199
|
+
@click=${this._setNow}
|
|
200
|
+
title="Şu anki saati seç"
|
|
201
|
+
>
|
|
202
|
+
<ui-icon name="uil-calendar-alt" size="16"></ui-icon>
|
|
203
|
+
</button>
|
|
204
|
+
<button
|
|
205
|
+
class="timepicker__action-btn"
|
|
206
|
+
@click=${() => this._clearValue()}
|
|
207
|
+
title="Temizle"
|
|
208
|
+
>
|
|
209
|
+
<ui-icon name="uil-trash" size="16"></ui-icon>
|
|
210
|
+
</button>
|
|
211
|
+
<button
|
|
212
|
+
class="timepicker__action-btn"
|
|
213
|
+
@click=${() => {
|
|
214
|
+
this._isOpen = !1;
|
|
215
|
+
}}
|
|
216
|
+
title="Kapat"
|
|
217
|
+
>
|
|
218
|
+
<ui-icon name="uil-times" size="16"></ui-icon>
|
|
219
|
+
</button>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
`;
|
|
223
|
+
}
|
|
224
|
+
render() {
|
|
225
|
+
return h`
|
|
226
|
+
<div class="timepicker__reference">
|
|
227
|
+
<logosphere-input
|
|
228
|
+
.label=${this.label}
|
|
229
|
+
.helper=${this.helper}
|
|
230
|
+
.error=${this.error}
|
|
231
|
+
.required=${this.required}
|
|
232
|
+
.disabled=${this.disabled}
|
|
233
|
+
.readonly=${this.readonly}
|
|
234
|
+
.size=${this.size}
|
|
235
|
+
.variant=${this.variant}
|
|
236
|
+
.placeholder=${this.placeholder}
|
|
237
|
+
.value=${this.value}
|
|
238
|
+
mask="00:00"
|
|
239
|
+
@input=${this._handleInputChange}
|
|
240
|
+
@clear=${this._handleInputClear}
|
|
241
|
+
@change=${(t) => t.stopPropagation()}
|
|
242
|
+
>
|
|
243
|
+
<button
|
|
244
|
+
slot="suffix"
|
|
245
|
+
type="button"
|
|
246
|
+
class="timepicker__trigger ${this._isOpen ? "timepicker__trigger--active" : ""}"
|
|
247
|
+
@click=${this._togglePopup}
|
|
248
|
+
?disabled=${this.disabled}
|
|
249
|
+
tabindex=${this.disabled ? "-1" : "0"}
|
|
250
|
+
aria-label="Saat seç"
|
|
251
|
+
aria-expanded=${this._isOpen ? "true" : "false"}
|
|
252
|
+
>
|
|
253
|
+
<ui-icon name="uil-clock" size="16"></ui-icon>
|
|
254
|
+
</button>
|
|
255
|
+
</logosphere-input>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
${this._renderPopup()}
|
|
259
|
+
`;
|
|
260
|
+
}
|
|
261
|
+
};
|
|
262
|
+
e.styles = [_`${d(g)}`];
|
|
263
|
+
i([
|
|
264
|
+
s({ type: String })
|
|
265
|
+
], e.prototype, "value", 2);
|
|
266
|
+
i([
|
|
267
|
+
s({ type: String })
|
|
268
|
+
], e.prototype, "label", 2);
|
|
269
|
+
i([
|
|
270
|
+
s({ type: String })
|
|
271
|
+
], e.prototype, "helper", 2);
|
|
272
|
+
i([
|
|
273
|
+
s({ type: String })
|
|
274
|
+
], e.prototype, "error", 2);
|
|
275
|
+
i([
|
|
276
|
+
s({ type: String })
|
|
277
|
+
], e.prototype, "placeholder", 2);
|
|
278
|
+
i([
|
|
279
|
+
s({ type: Boolean })
|
|
280
|
+
], e.prototype, "required", 2);
|
|
281
|
+
i([
|
|
282
|
+
s({ type: Boolean })
|
|
283
|
+
], e.prototype, "disabled", 2);
|
|
284
|
+
i([
|
|
285
|
+
s({ type: Boolean })
|
|
286
|
+
], e.prototype, "readonly", 2);
|
|
287
|
+
i([
|
|
288
|
+
s({ type: String })
|
|
289
|
+
], e.prototype, "size", 2);
|
|
290
|
+
i([
|
|
291
|
+
s({ type: String })
|
|
292
|
+
], e.prototype, "variant", 2);
|
|
293
|
+
i([
|
|
294
|
+
s({ attribute: !1 })
|
|
295
|
+
], e.prototype, "onChange", 2);
|
|
296
|
+
i([
|
|
297
|
+
c()
|
|
298
|
+
], e.prototype, "_isOpen", 2);
|
|
299
|
+
i([
|
|
300
|
+
c()
|
|
301
|
+
], e.prototype, "_hour", 2);
|
|
302
|
+
i([
|
|
303
|
+
c()
|
|
304
|
+
], e.prototype, "_minute", 2);
|
|
305
|
+
i([
|
|
306
|
+
u(".timepicker__reference")
|
|
307
|
+
], e.prototype, "_referenceEl", 2);
|
|
308
|
+
i([
|
|
309
|
+
u("[data-timepicker-popup]")
|
|
310
|
+
], e.prototype, "_popupEl", 2);
|
|
311
|
+
e = i([
|
|
312
|
+
v("logosphere-timepicker")
|
|
313
|
+
], e);
|
|
314
|
+
export {
|
|
315
|
+
e as T
|
|
316
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
"use strict";const a=require("lit"),t=require("lit/decorators.js"),l=require("@popperjs/core");require("./input-DPTTu8ZR.cjs");require("./ui-icon-DKZMrOTi.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}}))}_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
|
+
<div data-timepicker-popup popover="manual" class="timepicker__popup">
|
|
3
|
+
<div class="timepicker__spinner">
|
|
4
|
+
<!-- Sol sütun: saat -->
|
|
5
|
+
<div class="timepicker__col timepicker__col--left">
|
|
6
|
+
<button
|
|
7
|
+
class="timepicker__spin-btn"
|
|
8
|
+
@mousedown=${()=>this._startSpin(this._incrementHour)}
|
|
9
|
+
@mouseup=${this._stopSpin}
|
|
10
|
+
@mouseleave=${this._stopSpin}
|
|
11
|
+
@touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementHour)}}
|
|
12
|
+
@touchend=${this._stopSpin}
|
|
13
|
+
tabindex="-1"
|
|
14
|
+
aria-label="Saat artır"
|
|
15
|
+
><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
|
|
16
|
+
<div class="timepicker__time-unit">${this._pad(this._hour)}</div>
|
|
17
|
+
<button
|
|
18
|
+
class="timepicker__spin-btn"
|
|
19
|
+
@mousedown=${()=>this._startSpin(this._decrementHour)}
|
|
20
|
+
@mouseup=${this._stopSpin}
|
|
21
|
+
@mouseleave=${this._stopSpin}
|
|
22
|
+
@touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementHour)}}
|
|
23
|
+
@touchend=${this._stopSpin}
|
|
24
|
+
tabindex="-1"
|
|
25
|
+
aria-label="Saat azalt"
|
|
26
|
+
><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<!-- Orta sütun: iki nokta -->
|
|
30
|
+
<div class="timepicker__col timepicker__col--sep">
|
|
31
|
+
<div class="timepicker__colon">:</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<!-- Sağ sütun: dakika -->
|
|
35
|
+
<div class="timepicker__col timepicker__col--right">
|
|
36
|
+
<button
|
|
37
|
+
class="timepicker__spin-btn"
|
|
38
|
+
@mousedown=${()=>this._startSpin(this._incrementMinute)}
|
|
39
|
+
@mouseup=${this._stopSpin}
|
|
40
|
+
@mouseleave=${this._stopSpin}
|
|
41
|
+
@touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementMinute)}}
|
|
42
|
+
@touchend=${this._stopSpin}
|
|
43
|
+
tabindex="-1"
|
|
44
|
+
aria-label="Dakika artır"
|
|
45
|
+
><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
|
|
46
|
+
<div class="timepicker__time-unit">${this._pad(this._minute)}</div>
|
|
47
|
+
<button
|
|
48
|
+
class="timepicker__spin-btn"
|
|
49
|
+
@mousedown=${()=>this._startSpin(this._decrementMinute)}
|
|
50
|
+
@mouseup=${this._stopSpin}
|
|
51
|
+
@mouseleave=${this._stopSpin}
|
|
52
|
+
@touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementMinute)}}
|
|
53
|
+
@touchend=${this._stopSpin}
|
|
54
|
+
tabindex="-1"
|
|
55
|
+
aria-label="Dakika azalt"
|
|
56
|
+
><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<!-- Action buttons -->
|
|
61
|
+
<div class="timepicker__actions">
|
|
62
|
+
<button
|
|
63
|
+
class="timepicker__action-btn"
|
|
64
|
+
@click=${this._setNow}
|
|
65
|
+
title="Şu anki saati seç"
|
|
66
|
+
>
|
|
67
|
+
<ui-icon name="uil-calendar-alt" size="16"></ui-icon>
|
|
68
|
+
</button>
|
|
69
|
+
<button
|
|
70
|
+
class="timepicker__action-btn"
|
|
71
|
+
@click=${()=>this._clearValue()}
|
|
72
|
+
title="Temizle"
|
|
73
|
+
>
|
|
74
|
+
<ui-icon name="uil-trash" size="16"></ui-icon>
|
|
75
|
+
</button>
|
|
76
|
+
<button
|
|
77
|
+
class="timepicker__action-btn"
|
|
78
|
+
@click=${()=>{this._isOpen=!1}}
|
|
79
|
+
title="Kapat"
|
|
80
|
+
>
|
|
81
|
+
<ui-icon name="uil-times" size="16"></ui-icon>
|
|
82
|
+
</button>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
`}render(){return a.html`
|
|
86
|
+
<div class="timepicker__reference">
|
|
87
|
+
<logosphere-input
|
|
88
|
+
.label=${this.label}
|
|
89
|
+
.helper=${this.helper}
|
|
90
|
+
.error=${this.error}
|
|
91
|
+
.required=${this.required}
|
|
92
|
+
.disabled=${this.disabled}
|
|
93
|
+
.readonly=${this.readonly}
|
|
94
|
+
.size=${this.size}
|
|
95
|
+
.variant=${this.variant}
|
|
96
|
+
.placeholder=${this.placeholder}
|
|
97
|
+
.value=${this.value}
|
|
98
|
+
mask="00:00"
|
|
99
|
+
@input=${this._handleInputChange}
|
|
100
|
+
@clear=${this._handleInputClear}
|
|
101
|
+
@change=${e=>e.stopPropagation()}
|
|
102
|
+
>
|
|
103
|
+
<button
|
|
104
|
+
slot="suffix"
|
|
105
|
+
type="button"
|
|
106
|
+
class="timepicker__trigger ${this._isOpen?"timepicker__trigger--active":""}"
|
|
107
|
+
@click=${this._togglePopup}
|
|
108
|
+
?disabled=${this.disabled}
|
|
109
|
+
tabindex=${this.disabled?"-1":"0"}
|
|
110
|
+
aria-label="Saat seç"
|
|
111
|
+
aria-expanded=${this._isOpen?"true":"false"}
|
|
112
|
+
>
|
|
113
|
+
<ui-icon name="uil-clock" size="16"></ui-icon>
|
|
114
|
+
</button>
|
|
115
|
+
</logosphere-input>
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
${this._renderPopup()}
|
|
119
|
+
`}};exports.TimePicker.styles=[a.css`${a.unsafeCSS(u)}`];i([t.property({type:String})],exports.TimePicker.prototype,"value",2);i([t.property({type:String})],exports.TimePicker.prototype,"label",2);i([t.property({type:String})],exports.TimePicker.prototype,"helper",2);i([t.property({type:String})],exports.TimePicker.prototype,"error",2);i([t.property({type:String})],exports.TimePicker.prototype,"placeholder",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"required",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"disabled",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"readonly",2);i([t.property({type:String})],exports.TimePicker.prototype,"size",2);i([t.property({type:String})],exports.TimePicker.prototype,"variant",2);i([t.property({attribute:!1})],exports.TimePicker.prototype,"onChange",2);i([t.state()],exports.TimePicker.prototype,"_isOpen",2);i([t.state()],exports.TimePicker.prototype,"_hour",2);i([t.state()],exports.TimePicker.prototype,"_minute",2);i([t.query(".timepicker__reference")],exports.TimePicker.prototype,"_referenceEl",2);i([t.query("[data-timepicker-popup]")],exports.TimePicker.prototype,"_popupEl",2);exports.TimePicker=i([t.customElement("logosphere-timepicker")],exports.TimePicker);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./timepicker-CRtoPBMn.cjs");Object.defineProperty(exports,"TimePicker",{enumerable:!0,get:()=>e.TimePicker});
|