@logosphere-ui/core 0.0.0-alpha.24 → 0.0.0-alpha.26
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/AGENTS.md +1118 -0
- package/dist/AGENTS.md +1118 -0
- package/dist/atoms/Badge/badge.d.ts +1 -1
- package/dist/atoms/FormField/formfield.d.ts +3 -0
- package/dist/badge-CGgnn_UN.js +72 -0
- package/dist/badge-DXBwR32c.cjs +13 -0
- package/dist/badge.cjs +1 -1
- package/dist/badge.js +1 -1
- package/dist/button-DRZ4sG4T.cjs +10 -0
- package/dist/button-Uu9oaieg.js +58 -0
- package/dist/button.cjs +1 -1
- package/dist/button.js +1 -1
- package/dist/{calendar-WZ_GQvnn.js → calendar-BiJlAmA6.js} +1 -1
- package/dist/{calendar-LMn1ZF3N.cjs → calendar-D5W-t26J.cjs} +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.js +1 -1
- package/dist/{card-KiNHfEi2.cjs → card-D829aA29.cjs} +1 -1
- package/dist/{card-CNoTUaJC.js → card-jDDQ5DHE.js} +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/{chatbot-Cn3Cvz8h.js → chatbot-CIagHZwr.js} +146 -84
- package/dist/chatbot-Cr1IZF4R.cjs +183 -0
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/{combobox-D5X75iH0.cjs → combobox-BrANDiaM.cjs} +1 -1
- package/dist/{combobox-CtvjEL24.js → combobox-D5QdM3ue.js} +3 -3
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/{datepicker-CwDDA6np.cjs → datepicker-CxKs90IQ.cjs} +1 -1
- package/dist/{datepicker-SwKsdw3S.js → datepicker-DZsZdSCv.js} +3 -3
- package/dist/datepicker.cjs +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/{drawer-DVINJB4a.js → drawer-D_qOdapq.js} +2 -2
- package/dist/drawer-s1BLy2Xe.cjs +25 -0
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.js +1 -1
- package/dist/{formfield-CNh4mBSs.js → formfield-BZOK4Pkz.js} +23 -16
- package/dist/formfield-HIqosWPz.cjs +33 -0
- package/dist/formfield.cjs +1 -1
- package/dist/formfield.js +1 -1
- package/dist/index.cjs +119 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +358 -41
- package/dist/index.umd.js +381 -173
- package/dist/{input-DcSyXsp9.js → input-CG6RsUJs.js} +2 -2
- package/dist/{input-C6OHJuya.cjs → input-DgGaco-Y.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-BSb9rGg4.cjs → leftmenu-BSVpwbyD.cjs} +1 -1
- package/dist/{leftmenu-vMqGQhcS.js → leftmenu-DJE2N5kl.js} +7 -7
- package/dist/molecules/Textarea/text-area.d.ts +5 -1
- package/dist/molecules/TimePicker/index.d.ts +2 -0
- package/dist/molecules/TimePicker/timepicker.d.ts +62 -0
- package/dist/organisms/Chatbot/chatbot.d.ts +7 -0
- package/dist/organisms/Toast/index.d.ts +2 -0
- package/dist/organisms/Toast/toast-container.d.ts +42 -0
- package/dist/organisms/Toast/toast.d.ts +48 -0
- package/dist/styles/main.css +186 -182
- package/dist/text-area-Bz62kq2S.cjs +51 -0
- package/dist/text-area-CG0gBXni.js +235 -0
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.js +1 -1
- package/dist/toast-container-BQ-a-nRG.cjs +64 -0
- package/dist/toast-container-Caqh4mDB.js +274 -0
- package/dist/toast.cjs +1 -0
- package/dist/toast.js +6 -0
- package/dist/{tree-menu-BbX8GK_z.js → tree-menu-B39KDvKV.js} +2 -2
- package/dist/tree-menu-BZEOD4_f.cjs +47 -0
- package/dist/tree-menu.cjs +1 -1
- package/dist/tree-menu.js +1 -1
- package/dist/ui-icon-BRl1UmIf.cjs +22 -0
- package/dist/ui-icon-CFvsDv0z.js +66 -0
- package/package.json +26 -11
- package/dist/badge-7IIatiRv.cjs +0 -13
- package/dist/badge-B2chRYGd.js +0 -72
- package/dist/button-BqOMevro.js +0 -58
- package/dist/button-CDRccsk9.cjs +0 -10
- package/dist/chatbot-DjFe2_HE.cjs +0 -161
- package/dist/drawer-BvcPd5nz.cjs +0 -25
- package/dist/formfield-BFOIEicR.cjs +0 -33
- package/dist/text-area-CZDdxbrN.cjs +0 -46
- package/dist/text-area-Dec_k4rs.js +0 -205
- package/dist/tree-menu-B1iwfHyd.cjs +0 -47
- package/dist/ui-icon-Bys4HYSQ.js +0 -57
- package/dist/ui-icon-DWh1MhBa.cjs +0 -22
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";const l=require("lit"),t=require("lit/decorators.js"),d=":host{display:block}.formfield{position:relative;font-family:var(--font-family-base)}.formfield__label{display:block;font-size:12px;line-height:1.125rem;letter-spacing:-.12px;font-weight:var(--font-weight-medium);color:var(--color-tertiary);margin-bottom:var(--spacing-1)}.formfield__required{color:var(--color-danger);margin-left:var(--spacing-1)}.formfield__container{position:relative;display:flex;align-items:center;box-sizing:border-box;border-radius:var(--radius-base);border:1px solid var(--color-border);padding:0 var(--spacing-2) 0 var(--spacing-3);background-color:var(--color-body-bg);cursor:text;transition:border-color var(--transition-speed-base) var(--transition-timing),background-color var(--transition-speed-base) var(--transition-timing)}.formfield__container--cursor-text{cursor:text}.formfield__container--cursor-pointer{cursor:pointer}.formfield__container--cursor-default{cursor:default}.formfield__container--default{min-height:32px}.formfield__container--large{min-height:40px}.formfield__container--multiline{align-items:flex-start;min-height:64px;padding-top:var(--spacing-2);padding-bottom:var(--spacing-2)}.formfield__container--hovered:not(.formfield__container--focused):not(.formfield__container--error):not(.formfield__container--disabled){background-color:var(--color-tertiary-bg)}.formfield__container--focused{border-color:var(--color-body-text);background-color:var(--color-body-bg)}.formfield__container--error{border-color:var(--color-danger)}.formfield__container--disabled{background-color:var(--color-body-bg);opacity:.4;cursor:not-allowed;pointer-events:none}.formfield__container--subtle:not(.formfield__container--focused):not(.formfield__container--error){border-color:transparent;background-color:var(--color-tertiary-bg)}.formfield__input-area{flex:1;min-width:0;display:flex;align-items:center}.formfield__container--multiline .formfield__input-area{align-items:flex-start;align-self:stretch}.formfield__prefix,.formfield__clear,.formfield__suffix{display:flex;align-items:center;flex-shrink:0;align-self:stretch}.formfield__container--multiline .formfield__clear,.formfield__container--multiline .formfield__suffix{align-items:flex-start}.formfield__prefix{margin-right:var(--spacing-2)}.formfield__clear,.formfield__suffix{margin-left:var(--spacing-2)}.formfield__container--has-prefix .formfield__prefix{border-right:1px solid var(--color-border);padding-right:var(--spacing-2)}.formfield__container--has-suffix .formfield__suffix{border-left:1px solid var(--color-border);padding-left:var(--spacing-2)}.formfield__prefix:empty,.formfield__clear:empty,.formfield__suffix:empty{display:none}.formfield__helper{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-tertiary);margin-top:var(--spacing-1)}.formfield__error{font-size:11px;line-height:1rem;letter-spacing:-.11px;font-weight:var(--font-weight-regular);color:var(--color-danger);margin-top:var(--spacing-1)}::slotted(input),::slotted(textarea){width:100%;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text)}::slotted(input:disabled),::slotted(textarea:disabled){cursor:not-allowed}";var c=Object.defineProperty,h=Object.getOwnPropertyDescriptor,o=(n,e,r,s)=>{for(var i=s>1?void 0:s?h(e,r):e,a=n.length-1,f;a>=0;a--)(f=n[a])&&(i=(s?f(e,r,i):f(i))||i);return s&&i&&c(e,r,i),i};exports.FormField=class extends l.LitElement{constructor(){super(...arguments),this.label="",this.helper="",this.error="",this.placeholder="",this.size="default",this.variant="default",this.cursor="text",this.required=!1,this.disabled=!1,this.readonly=!1,this.multiline=!1,this.forceFocused=!1,this._focused=!1,this._hovered=!1,this._hasPrefix=!1,this._hasSuffix=!1,this.handleSlotFocus=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!0,this.dispatchEvent(new CustomEvent("field-focus",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleSlotBlur=e=>{const r=e.target;["INPUT","TEXTAREA","SELECT"].includes(r.tagName)&&(this._focused=!1,this.dispatchEvent(new CustomEvent("field-blur",{bubbles:!0,composed:!0,detail:{originalEvent:e}})))},this.handleMouseEnter=()=>{this._hovered=!0},this.handleMouseLeave=()=>{this._hovered=!1},this.handleContainerClick=e=>{const r=e.target;if(["INPUT","TEXTAREA","SELECT","BUTTON"].includes(r.tagName))return;this.shadowRoot?.querySelector("slot:not([name])")?.assignedElements({flatten:!0}).find(a=>["INPUT","TEXTAREA","SELECT"].includes(a.tagName))?.focus()},this.handlePrefixSlotChange=e=>{const r=e.target;this._hasPrefix=r.assignedElements({flatten:!0}).length>0},this.handleSuffixSlotChange=e=>{const r=e.target;this._hasSuffix=r.assignedElements({flatten:!0}).length>0}}connectedCallback(){super.connectedCallback(),this.addEventListener("focus",this.handleSlotFocus,!0),this.addEventListener("blur",this.handleSlotBlur,!0)}firstUpdated(){const e=this.shadowRoot?.querySelector('slot[name="prefix"]'),r=this.shadowRoot?.querySelector('slot[name="suffix"]');e&&(this._hasPrefix=e.assignedElements({flatten:!0}).length>0),r&&(this._hasSuffix=r.assignedElements({flatten:!0}).length>0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focus",this.handleSlotFocus,!0),this.removeEventListener("blur",this.handleSlotBlur,!0)}render(){const e=!!this.error,r=!e&&!!this.helper,s=["formfield__container",`formfield__container--${this.size}`,`formfield__container--cursor-${this.cursor}`,this._hasPrefix?"formfield__container--has-prefix":"",this._hasSuffix?"formfield__container--has-suffix":"",e?"formfield__container--error":"",this._focused||this.forceFocused?"formfield__container--focused":"",this._hovered?"formfield__container--hovered":"",this.disabled?"formfield__container--disabled":"",this.variant==="subtle"?"formfield__container--subtle":"",this.multiline?"formfield__container--multiline":""].filter(Boolean).join(" ");return l.html`
|
|
2
|
+
<div class="formfield">
|
|
3
|
+
${this.label?l.html`
|
|
4
|
+
<label class="formfield__label">
|
|
5
|
+
${this.label}
|
|
6
|
+
${this.required?l.html`<span class="formfield__required">*</span>`:""}
|
|
7
|
+
</label>
|
|
8
|
+
`:""}
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
class="${s}"
|
|
12
|
+
@mouseenter=${this.handleMouseEnter}
|
|
13
|
+
@mouseleave=${this.handleMouseLeave}
|
|
14
|
+
@click=${this.handleContainerClick}
|
|
15
|
+
>
|
|
16
|
+
<div class="formfield__prefix">
|
|
17
|
+
<slot name="prefix" @slotchange=${this.handlePrefixSlotChange}></slot>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="formfield__input-area">
|
|
20
|
+
<slot></slot>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="formfield__clear">
|
|
23
|
+
<slot name="clear"></slot>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="formfield__suffix">
|
|
26
|
+
<slot name="suffix" @slotchange=${this.handleSuffixSlotChange}></slot>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
${r?l.html`<div class="formfield__helper">${this.helper}</div>`:""}
|
|
31
|
+
${e?l.html`<div class="formfield__error">${this.error}</div>`:""}
|
|
32
|
+
</div>
|
|
33
|
+
`}};exports.FormField.styles=[l.css`${l.unsafeCSS(d)}`];o([t.property({type:String})],exports.FormField.prototype,"label",2);o([t.property({type:String})],exports.FormField.prototype,"helper",2);o([t.property({type:String})],exports.FormField.prototype,"error",2);o([t.property({type:String})],exports.FormField.prototype,"placeholder",2);o([t.property({type:String})],exports.FormField.prototype,"size",2);o([t.property({type:String})],exports.FormField.prototype,"variant",2);o([t.property({type:String})],exports.FormField.prototype,"cursor",2);o([t.property({type:Boolean})],exports.FormField.prototype,"required",2);o([t.property({type:Boolean})],exports.FormField.prototype,"disabled",2);o([t.property({type:Boolean})],exports.FormField.prototype,"readonly",2);o([t.property({type:Boolean})],exports.FormField.prototype,"multiline",2);o([t.property({type:Boolean})],exports.FormField.prototype,"forceFocused",2);o([t.state()],exports.FormField.prototype,"_focused",2);o([t.state()],exports.FormField.prototype,"_hovered",2);o([t.state()],exports.FormField.prototype,"_hasPrefix",2);o([t.state()],exports.FormField.prototype,"_hasSuffix",2);exports.FormField=o([t.customElement("logosphere-formfield")],exports.FormField);
|
package/dist/formfield.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./formfield-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./formfield-HIqosWPz.cjs");Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>e.FormField});
|
package/dist/formfield.js
CHANGED
package/dist/index.cjs
CHANGED
|
@@ -1 +1,119 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./button-DRZ4sG4T.cjs"),h=require("./badge-DXBwR32c.cjs"),_=require("./checkbox-CdDTRdKV.cjs"),m=require("./formfield-HIqosWPz.cjs"),b=require("./switch-Rnnn10bn.cjs"),g=require("./breadcrumb-Cop-B1J7.cjs"),v=require("./card-D829aA29.cjs"),f=require("./input-DgGaco-Y.cjs"),y=require("./popover-C2p5Pmts.cjs"),k=require("./text-area-Bz62kq2S.cjs"),a=require("lit"),t=require("lit/decorators.js"),P=require("@popperjs/core");require("./ui-icon-BRl1UmIf.cjs");const x=require("./chatbot-Cr1IZF4R.cjs"),$=require("./calendar-D5W-t26J.cjs"),O=require("./combobox-BrANDiaM.cjs"),w=require("./datepicker-CxKs90IQ.cjs"),S=require("./drawer-s1BLy2Xe.cjs"),T=require("./download-manager-BSIMTGaK.cjs"),u=require("./leftmenu-BSVpwbyD.cjs"),j=require("./modal-3-TNUICH.cjs"),l=require("./toast-container-BQ-a-nRG.cjs"),C=require("./tab-DcjAlXzU.cjs"),q=require("./tree-menu-BZEOD4_f.cjs"),M=":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 L=Object.defineProperty,z=Object.getOwnPropertyDescriptor,i=(p,e,r,n)=>{for(var o=n>1?void 0:n?z(e,r):e,s=p.length-1,c;s>=0;s--)(c=p[s])&&(o=(n?c(e,r,o):c(o))||o);return n&&o&&L(e,r,o),o};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[n,o]=this._parseValue(r);this._hour=n,this._minute=o;const s=`${this._pad(n)}:${this._pad(o)}`;this.value=s,this._emit(s)}},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,n]=this._parseValue(this.value);this._hour=r,this._minute=n}}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=P.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(M)}`];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);Object.defineProperty(exports,"Button",{enumerable:!0,get:()=>d.Button});Object.defineProperty(exports,"LogosphereBadge",{enumerable:!0,get:()=>h.LogosphereBadge});Object.defineProperty(exports,"Checkbox",{enumerable:!0,get:()=>_.Checkbox});Object.defineProperty(exports,"FormField",{enumerable:!0,get:()=>m.FormField});Object.defineProperty(exports,"Switch",{enumerable:!0,get:()=>b.Switch});Object.defineProperty(exports,"Breadcrumb",{enumerable:!0,get:()=>g.Breadcrumb});Object.defineProperty(exports,"Card",{enumerable:!0,get:()=>v.Card});Object.defineProperty(exports,"LogosphereInput",{enumerable:!0,get:()=>f.LogosphereInput});Object.defineProperty(exports,"Popover",{enumerable:!0,get:()=>y.Popover});Object.defineProperty(exports,"TextArea",{enumerable:!0,get:()=>k.TextArea});Object.defineProperty(exports,"LogosphereChatBot",{enumerable:!0,get:()=>x.LogosphereChatBot});Object.defineProperty(exports,"LogosphereCalendar",{enumerable:!0,get:()=>$.LogosphereCalendar});Object.defineProperty(exports,"Combobox",{enumerable:!0,get:()=>O.Combobox});Object.defineProperty(exports,"LogosphereDatePicker",{enumerable:!0,get:()=>w.LogosphereDatePicker});Object.defineProperty(exports,"Drawer",{enumerable:!0,get:()=>S.Drawer});Object.defineProperty(exports,"DownloadManager",{enumerable:!0,get:()=>T.DownloadManager});Object.defineProperty(exports,"LeftMenu",{enumerable:!0,get:()=>u.LeftMenu});Object.defineProperty(exports,"LeftMenuItemElement",{enumerable:!0,get:()=>u.LeftMenuItemElement});Object.defineProperty(exports,"Modal",{enumerable:!0,get:()=>j.Modal});Object.defineProperty(exports,"LogosphereToast",{enumerable:!0,get:()=>l.LogosphereToast});Object.defineProperty(exports,"LogosphereToastContainer",{enumerable:!0,get:()=>l.LogosphereToastContainer});exports.ToastService=l.ToastService;Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>C.LogosphereTab});Object.defineProperty(exports,"TreeMenu",{enumerable:!0,get:()=>q.TreeMenu});
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export * from "./molecules/Card/index.js";
|
|
|
8
8
|
export * from "./molecules/Input/index.js";
|
|
9
9
|
export * from "./molecules/Popover/index.js";
|
|
10
10
|
export * from "./molecules/Textarea/index.js";
|
|
11
|
+
export * from "./molecules/TimePicker/index.js";
|
|
11
12
|
export * from "./organisms/Chatbot/index.js";
|
|
12
13
|
export * from "./organisms/Calendar/index.js";
|
|
13
14
|
export * from "./organisms/Combobox/index.js";
|
|
@@ -16,5 +17,6 @@ export * from "./organisms/Drawer/index.js";
|
|
|
16
17
|
export * from "./organisms/DownloadManager/index.js";
|
|
17
18
|
export * from "./organisms/LeftMenu/index.js";
|
|
18
19
|
export * from "./organisms/Modal/index.js";
|
|
20
|
+
export * from "./organisms/Toast/index.js";
|
|
19
21
|
export * from "./organisms/Tab/index.js";
|
|
20
22
|
export * from "./organisms/TreeMenu/index.js";
|
package/dist/index.js
CHANGED
|
@@ -1,43 +1,360 @@
|
|
|
1
|
-
import { B as
|
|
2
|
-
import { L as
|
|
3
|
-
import { C as
|
|
4
|
-
import { F as
|
|
5
|
-
import { S as
|
|
6
|
-
import { B
|
|
7
|
-
import { C } from "./card-
|
|
8
|
-
import { L as
|
|
9
|
-
import { P as
|
|
10
|
-
import { T as
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
1
|
+
import { B as C } from "./button-Uu9oaieg.js";
|
|
2
|
+
import { L as z } from "./badge-CGgnn_UN.js";
|
|
3
|
+
import { C as E } from "./checkbox-g6kl2jGR.js";
|
|
4
|
+
import { F as I } from "./formfield-BZOK4Pkz.js";
|
|
5
|
+
import { S as V } from "./switch-CG4SSjTg.js";
|
|
6
|
+
import { B } from "./breadcrumb-BB61Xt0s.js";
|
|
7
|
+
import { C as H } from "./card-jDDQ5DHE.js";
|
|
8
|
+
import { L as F } from "./input-CG6RsUJs.js";
|
|
9
|
+
import { P as N } from "./popover-CaVOXo_k.js";
|
|
10
|
+
import { T as U } from "./text-area-CG0gBXni.js";
|
|
11
|
+
import { unsafeCSS as d, css as _, LitElement as m, html as h } from "lit";
|
|
12
|
+
import { property as o, state as c, query as u, customElement as v } from "lit/decorators.js";
|
|
13
|
+
import { createPopper as b } from "@popperjs/core";
|
|
14
|
+
import "./ui-icon-CFvsDv0z.js";
|
|
15
|
+
import { L as J } from "./chatbot-CIagHZwr.js";
|
|
16
|
+
import { L as R } from "./calendar-BiJlAmA6.js";
|
|
17
|
+
import { C as X } from "./combobox-D5QdM3ue.js";
|
|
18
|
+
import { L as Z } from "./datepicker-DZsZdSCv.js";
|
|
19
|
+
import { D as te } from "./drawer-D_qOdapq.js";
|
|
20
|
+
import { D as re } from "./download-manager-a541AYhr.js";
|
|
21
|
+
import { L as se, a as ne } from "./leftmenu-DJE2N5kl.js";
|
|
22
|
+
import { M as pe } from "./modal-BhhhXCEK.js";
|
|
23
|
+
import { L as ce, a as he, T as ue } from "./toast-container-Caqh4mDB.js";
|
|
24
|
+
import { L as _e } from "./tab-BYU_XEhp.js";
|
|
25
|
+
import { T as ve } from "./tree-menu-B39KDvKV.js";
|
|
26
|
+
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)}";
|
|
27
|
+
var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, r, n, a) => {
|
|
28
|
+
for (var s = a > 1 ? void 0 : a ? k(r, n) : r, p = e.length - 1, l; p >= 0; p--)
|
|
29
|
+
(l = e[p]) && (s = (a ? l(r, n, s) : l(s)) || s);
|
|
30
|
+
return a && s && f(r, n, s), s;
|
|
31
|
+
};
|
|
32
|
+
let t = class extends m {
|
|
33
|
+
constructor() {
|
|
34
|
+
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) => {
|
|
35
|
+
this._isOpen && !e.composedPath().includes(this) && (this._isOpen = !1);
|
|
36
|
+
}, this._handleInputChange = (e) => {
|
|
37
|
+
e.stopPropagation();
|
|
38
|
+
const r = e.detail?.value ?? "";
|
|
39
|
+
if (/^\d{2}:\d{2}$/.test(r)) {
|
|
40
|
+
const [n, a] = this._parseValue(r);
|
|
41
|
+
this._hour = n, this._minute = a;
|
|
42
|
+
const s = `${this._pad(n)}:${this._pad(a)}`;
|
|
43
|
+
this.value = s, this._emit(s);
|
|
44
|
+
}
|
|
45
|
+
}, this._handleInputClear = (e) => {
|
|
46
|
+
e.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
|
|
47
|
+
}, this._incrementHour = () => {
|
|
48
|
+
this._hour = (this._hour + 1) % 24, this._syncValue();
|
|
49
|
+
}, this._decrementHour = () => {
|
|
50
|
+
this._hour = (this._hour - 1 + 24) % 24, this._syncValue();
|
|
51
|
+
}, this._incrementMinute = () => {
|
|
52
|
+
this._minute = (this._minute + 1) % 60, this._syncValue();
|
|
53
|
+
}, this._decrementMinute = () => {
|
|
54
|
+
this._minute = (this._minute - 1 + 60) % 60, this._syncValue();
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
// ── Lifecycle ───────────────────────────────────────────────────────────────
|
|
58
|
+
connectedCallback() {
|
|
59
|
+
super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
|
|
60
|
+
}
|
|
61
|
+
disconnectedCallback() {
|
|
62
|
+
super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._destroyPopper();
|
|
63
|
+
}
|
|
64
|
+
willUpdate(e) {
|
|
65
|
+
if (e.has("value") && /^\d{1,2}:\d{2}$/.test(this.value)) {
|
|
66
|
+
const [r, n] = this._parseValue(this.value);
|
|
67
|
+
this._hour = r, this._minute = n;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
updated(e) {
|
|
71
|
+
e.has("_isOpen") && (this._isOpen ? this.updateComplete.then(() => {
|
|
72
|
+
this._showPopover(), this._updatePopper();
|
|
73
|
+
}) : (this._hidePopover(), this._destroyPopper()));
|
|
74
|
+
}
|
|
75
|
+
// ── Value helpers ───────────────────────────────────────────────────────────
|
|
76
|
+
_parseValue(e) {
|
|
77
|
+
const r = e.match(/^(\d{1,2}):(\d{2})$/);
|
|
78
|
+
return r ? [
|
|
79
|
+
Math.min(23, Math.max(0, parseInt(r[1], 10))),
|
|
80
|
+
Math.min(59, Math.max(0, parseInt(r[2], 10)))
|
|
81
|
+
] : [0, 0];
|
|
82
|
+
}
|
|
83
|
+
_pad(e) {
|
|
84
|
+
return String(e).padStart(2, "0");
|
|
85
|
+
}
|
|
86
|
+
// ── Popper / Popover ────────────────────────────────────────────────────────
|
|
87
|
+
_updatePopper() {
|
|
88
|
+
!this._referenceEl || !this._popupEl || (this._popperInstance = b(this._referenceEl, this._popupEl, {
|
|
89
|
+
placement: "bottom-start",
|
|
90
|
+
modifiers: [
|
|
91
|
+
{ name: "offset", options: { offset: [0, 4] } },
|
|
92
|
+
{ name: "flip", options: { fallbackPlacements: ["top-start"] } },
|
|
93
|
+
{
|
|
94
|
+
name: "preventOverflow",
|
|
95
|
+
options: { boundary: document.documentElement, padding: 8 }
|
|
96
|
+
}
|
|
97
|
+
]
|
|
98
|
+
}));
|
|
99
|
+
}
|
|
100
|
+
_destroyPopper() {
|
|
101
|
+
this._popperInstance?.destroy(), this._popperInstance = void 0;
|
|
102
|
+
}
|
|
103
|
+
_showPopover() {
|
|
104
|
+
this._popupEl?.showPopover?.();
|
|
105
|
+
}
|
|
106
|
+
_hidePopover() {
|
|
107
|
+
const e = this._popupEl;
|
|
108
|
+
try {
|
|
109
|
+
e?.hidePopover?.();
|
|
110
|
+
} catch {
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
_togglePopup() {
|
|
114
|
+
if (!(this.disabled || this.readonly))
|
|
115
|
+
if (this._isOpen)
|
|
116
|
+
this._isOpen = !1;
|
|
117
|
+
else {
|
|
118
|
+
const [e, r] = this._parseValue(this.value);
|
|
119
|
+
this._hour = e, this._minute = r, this._isOpen = !0;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
_clearValue(e) {
|
|
123
|
+
e?.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
|
|
124
|
+
}
|
|
125
|
+
_setNow() {
|
|
126
|
+
const e = /* @__PURE__ */ new Date();
|
|
127
|
+
this._hour = e.getHours(), this._minute = e.getMinutes(), this._syncValue();
|
|
128
|
+
}
|
|
129
|
+
_emit(e) {
|
|
130
|
+
this.onChange?.(e), this.dispatchEvent(new CustomEvent("change", {
|
|
131
|
+
bubbles: !0,
|
|
132
|
+
composed: !0,
|
|
133
|
+
detail: { value: e }
|
|
134
|
+
}));
|
|
135
|
+
}
|
|
136
|
+
_syncValue() {
|
|
137
|
+
const e = `${this._pad(this._hour)}:${this._pad(this._minute)}`;
|
|
138
|
+
this.value = e, this._emit(e);
|
|
139
|
+
}
|
|
140
|
+
_startSpin(e) {
|
|
141
|
+
e(), this._spinInterval = setInterval(e, 120);
|
|
142
|
+
}
|
|
143
|
+
_stopSpin() {
|
|
144
|
+
clearInterval(this._spinInterval), this._spinInterval = void 0;
|
|
145
|
+
}
|
|
146
|
+
// ── Render ──────────────────────────────────────────────────────────────────
|
|
147
|
+
_renderPopup() {
|
|
148
|
+
return h`
|
|
149
|
+
<div data-timepicker-popup popover="manual" class="timepicker__popup">
|
|
150
|
+
<div class="timepicker__spinner">
|
|
151
|
+
<!-- Sol sütun: saat -->
|
|
152
|
+
<div class="timepicker__col timepicker__col--left">
|
|
153
|
+
<button
|
|
154
|
+
class="timepicker__spin-btn"
|
|
155
|
+
@mousedown=${() => this._startSpin(this._incrementHour)}
|
|
156
|
+
@mouseup=${this._stopSpin}
|
|
157
|
+
@mouseleave=${this._stopSpin}
|
|
158
|
+
@touchstart=${(e) => {
|
|
159
|
+
e.preventDefault(), this._startSpin(this._incrementHour);
|
|
160
|
+
}}
|
|
161
|
+
@touchend=${this._stopSpin}
|
|
162
|
+
tabindex="-1"
|
|
163
|
+
aria-label="Saat artır"
|
|
164
|
+
><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
|
|
165
|
+
<div class="timepicker__time-unit">${this._pad(this._hour)}</div>
|
|
166
|
+
<button
|
|
167
|
+
class="timepicker__spin-btn"
|
|
168
|
+
@mousedown=${() => this._startSpin(this._decrementHour)}
|
|
169
|
+
@mouseup=${this._stopSpin}
|
|
170
|
+
@mouseleave=${this._stopSpin}
|
|
171
|
+
@touchstart=${(e) => {
|
|
172
|
+
e.preventDefault(), this._startSpin(this._decrementHour);
|
|
173
|
+
}}
|
|
174
|
+
@touchend=${this._stopSpin}
|
|
175
|
+
tabindex="-1"
|
|
176
|
+
aria-label="Saat azalt"
|
|
177
|
+
><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
<!-- Orta sütun: iki nokta -->
|
|
181
|
+
<div class="timepicker__col timepicker__col--sep">
|
|
182
|
+
<div class="timepicker__colon">:</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- Sağ sütun: dakika -->
|
|
186
|
+
<div class="timepicker__col timepicker__col--right">
|
|
187
|
+
<button
|
|
188
|
+
class="timepicker__spin-btn"
|
|
189
|
+
@mousedown=${() => this._startSpin(this._incrementMinute)}
|
|
190
|
+
@mouseup=${this._stopSpin}
|
|
191
|
+
@mouseleave=${this._stopSpin}
|
|
192
|
+
@touchstart=${(e) => {
|
|
193
|
+
e.preventDefault(), this._startSpin(this._incrementMinute);
|
|
194
|
+
}}
|
|
195
|
+
@touchend=${this._stopSpin}
|
|
196
|
+
tabindex="-1"
|
|
197
|
+
aria-label="Dakika artır"
|
|
198
|
+
><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
|
|
199
|
+
<div class="timepicker__time-unit">${this._pad(this._minute)}</div>
|
|
200
|
+
<button
|
|
201
|
+
class="timepicker__spin-btn"
|
|
202
|
+
@mousedown=${() => this._startSpin(this._decrementMinute)}
|
|
203
|
+
@mouseup=${this._stopSpin}
|
|
204
|
+
@mouseleave=${this._stopSpin}
|
|
205
|
+
@touchstart=${(e) => {
|
|
206
|
+
e.preventDefault(), this._startSpin(this._decrementMinute);
|
|
207
|
+
}}
|
|
208
|
+
@touchend=${this._stopSpin}
|
|
209
|
+
tabindex="-1"
|
|
210
|
+
aria-label="Dakika azalt"
|
|
211
|
+
><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<!-- Action buttons -->
|
|
216
|
+
<div class="timepicker__actions">
|
|
217
|
+
<button
|
|
218
|
+
class="timepicker__action-btn"
|
|
219
|
+
@click=${this._setNow}
|
|
220
|
+
title="Şu anki saati seç"
|
|
221
|
+
>
|
|
222
|
+
<ui-icon name="uil-calendar-alt" size="16"></ui-icon>
|
|
223
|
+
</button>
|
|
224
|
+
<button
|
|
225
|
+
class="timepicker__action-btn"
|
|
226
|
+
@click=${() => this._clearValue()}
|
|
227
|
+
title="Temizle"
|
|
228
|
+
>
|
|
229
|
+
<ui-icon name="uil-trash" size="16"></ui-icon>
|
|
230
|
+
</button>
|
|
231
|
+
<button
|
|
232
|
+
class="timepicker__action-btn"
|
|
233
|
+
@click=${() => {
|
|
234
|
+
this._isOpen = !1;
|
|
235
|
+
}}
|
|
236
|
+
title="Kapat"
|
|
237
|
+
>
|
|
238
|
+
<ui-icon name="uil-times" size="16"></ui-icon>
|
|
239
|
+
</button>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
`;
|
|
243
|
+
}
|
|
244
|
+
render() {
|
|
245
|
+
return h`
|
|
246
|
+
<div class="timepicker__reference">
|
|
247
|
+
<logosphere-input
|
|
248
|
+
.label=${this.label}
|
|
249
|
+
.helper=${this.helper}
|
|
250
|
+
.error=${this.error}
|
|
251
|
+
.required=${this.required}
|
|
252
|
+
.disabled=${this.disabled}
|
|
253
|
+
.readonly=${this.readonly}
|
|
254
|
+
.size=${this.size}
|
|
255
|
+
.variant=${this.variant}
|
|
256
|
+
.placeholder=${this.placeholder}
|
|
257
|
+
.value=${this.value}
|
|
258
|
+
mask="00:00"
|
|
259
|
+
@input=${this._handleInputChange}
|
|
260
|
+
@clear=${this._handleInputClear}
|
|
261
|
+
@change=${(e) => e.stopPropagation()}
|
|
262
|
+
>
|
|
263
|
+
<button
|
|
264
|
+
slot="suffix"
|
|
265
|
+
type="button"
|
|
266
|
+
class="timepicker__trigger ${this._isOpen ? "timepicker__trigger--active" : ""}"
|
|
267
|
+
@click=${this._togglePopup}
|
|
268
|
+
?disabled=${this.disabled}
|
|
269
|
+
tabindex=${this.disabled ? "-1" : "0"}
|
|
270
|
+
aria-label="Saat seç"
|
|
271
|
+
aria-expanded=${this._isOpen ? "true" : "false"}
|
|
272
|
+
>
|
|
273
|
+
<ui-icon name="uil-clock" size="16"></ui-icon>
|
|
274
|
+
</button>
|
|
275
|
+
</logosphere-input>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
${this._renderPopup()}
|
|
279
|
+
`;
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
t.styles = [_`${d(g)}`];
|
|
283
|
+
i([
|
|
284
|
+
o({ type: String })
|
|
285
|
+
], t.prototype, "value", 2);
|
|
286
|
+
i([
|
|
287
|
+
o({ type: String })
|
|
288
|
+
], t.prototype, "label", 2);
|
|
289
|
+
i([
|
|
290
|
+
o({ type: String })
|
|
291
|
+
], t.prototype, "helper", 2);
|
|
292
|
+
i([
|
|
293
|
+
o({ type: String })
|
|
294
|
+
], t.prototype, "error", 2);
|
|
295
|
+
i([
|
|
296
|
+
o({ type: String })
|
|
297
|
+
], t.prototype, "placeholder", 2);
|
|
298
|
+
i([
|
|
299
|
+
o({ type: Boolean })
|
|
300
|
+
], t.prototype, "required", 2);
|
|
301
|
+
i([
|
|
302
|
+
o({ type: Boolean })
|
|
303
|
+
], t.prototype, "disabled", 2);
|
|
304
|
+
i([
|
|
305
|
+
o({ type: Boolean })
|
|
306
|
+
], t.prototype, "readonly", 2);
|
|
307
|
+
i([
|
|
308
|
+
o({ type: String })
|
|
309
|
+
], t.prototype, "size", 2);
|
|
310
|
+
i([
|
|
311
|
+
o({ type: String })
|
|
312
|
+
], t.prototype, "variant", 2);
|
|
313
|
+
i([
|
|
314
|
+
o({ attribute: !1 })
|
|
315
|
+
], t.prototype, "onChange", 2);
|
|
316
|
+
i([
|
|
317
|
+
c()
|
|
318
|
+
], t.prototype, "_isOpen", 2);
|
|
319
|
+
i([
|
|
320
|
+
c()
|
|
321
|
+
], t.prototype, "_hour", 2);
|
|
322
|
+
i([
|
|
323
|
+
c()
|
|
324
|
+
], t.prototype, "_minute", 2);
|
|
325
|
+
i([
|
|
326
|
+
u(".timepicker__reference")
|
|
327
|
+
], t.prototype, "_referenceEl", 2);
|
|
328
|
+
i([
|
|
329
|
+
u("[data-timepicker-popup]")
|
|
330
|
+
], t.prototype, "_popupEl", 2);
|
|
331
|
+
t = i([
|
|
332
|
+
v("logosphere-timepicker")
|
|
333
|
+
], t);
|
|
21
334
|
export {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
335
|
+
B as Breadcrumb,
|
|
336
|
+
C as Button,
|
|
337
|
+
H as Card,
|
|
338
|
+
E as Checkbox,
|
|
339
|
+
X as Combobox,
|
|
340
|
+
re as DownloadManager,
|
|
341
|
+
te as Drawer,
|
|
342
|
+
I as FormField,
|
|
343
|
+
se as LeftMenu,
|
|
344
|
+
ne as LeftMenuItemElement,
|
|
345
|
+
z as LogosphereBadge,
|
|
346
|
+
R as LogosphereCalendar,
|
|
347
|
+
J as LogosphereChatBot,
|
|
348
|
+
Z as LogosphereDatePicker,
|
|
349
|
+
F as LogosphereInput,
|
|
350
|
+
_e as LogosphereTab,
|
|
351
|
+
ce as LogosphereToast,
|
|
352
|
+
he as LogosphereToastContainer,
|
|
353
|
+
pe as Modal,
|
|
354
|
+
N as Popover,
|
|
355
|
+
V as Switch,
|
|
356
|
+
U as TextArea,
|
|
357
|
+
t as TimePicker,
|
|
358
|
+
ue as ToastService,
|
|
359
|
+
ve as TreeMenu
|
|
43
360
|
};
|