@logosphere-ui/core 0.0.0-alpha.13 → 0.0.0-alpha.15

package/dist/datepicker-BLv_G9Yb.cjs

@@ -1,85 +0,0 @@
-"use strict";const s=require("lit"),r=require("lit/decorators.js"),h=require("lit/directives/live.js"),u=require("@popperjs/core");require("./formfield-BFOIEicR.cjs");const d=require("./calendar-DF3q_dcG.cjs");require("./ui-icon-DWh1MhBa.cjs");const _=require("dayjs"),c=".dp{display:block;position:relative;width:100%;font-family:var(--font-family-base)}.dp__field,.dp__reference{width:100%}.dp__input{width:100%;border:none;outline:none;background:transparent;font-size:var(--font-size-sm);font-family:var(--font-family-base);color:var(--color-body-text);line-height:1.5}.dp__input::placeholder{color:var(--color-tertiary)}.dp__input:disabled{cursor:not-allowed}.dp__icon-btn{border:none;background:transparent;color:var(--color-gray-400);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:color var(--transition-speed-fast) var(--transition-timing)}.dp__icon-btn_suffix{padding-right:var(--spacing-1)}.dp__icon-btn:hover{color:var(--color-gray-600)}.dp__icon-btn:disabled{cursor:not-allowed;opacity:.5}.dp__popup{background-color:var(--color-body-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:var(--z-index-dropdown);padding:var(--spacing-4);box-sizing:border-box;overflow:hidden;max-height:calc(100vh - 16px)}";var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,i=(p,e,t,a)=>{for(var n=a>1?void 0:a?f(e,t):e,o=p.length-1,l;o>=0;o--)(l=p[o])&&(n=(a?l(e,t,n):l(n))||n);return a&&n&&g(e,t,n),n};let y=0;const m=()=>`dp-${++y}`;exports.LedsDatePicker=class extends s.LitElement{constructor(){super(...arguments),this.value=null,this.min=null,this.max=null,this.required=!1,this.disabled=!1,this.readonly=!1,this.expandFactor=1.05,this.placeholder="GG/AA/YYYY veya GG.AA.YYYY",this.label="",this.helper="",this.error="",this.size="default",this.variant="default",this.rangeMode=!1,this.disabledDays=[],this.rangeStart=null,this.rangeEnd=null,this._open=!1,this._rangeStart=null,this._rangeEnd=null,this._hasError=!1,this._errorMsg="",this._inputDraft=null,this._errorTimer=null,this.inputId=m(),this._outsideClick=e=>{this._open&&(e.composedPath().includes(this)||(this._parseAndSetDate(),this._toggleOpen(!1)))},this._openDropdown=()=>{this._toggleOpen(!0)},this._onBlur=()=>{this._parseAndSetDate()}}willUpdate(e){e.has("rangeStart")&&(this._rangeStart=this.rangeStart),e.has("rangeEnd")&&(this._rangeEnd=this.rangeEnd),e.has("value")&&!this._isInputFocused()&&(this._inputDraft=null)}connectedCallback(){super.connectedCallback(),window.addEventListener("click",this._outsideClick,!0)}disconnectedCallback(){window.removeEventListener("click",this._outsideClick,!0),this._destroyPopper(),this._errorTimer&&clearTimeout(this._errorTimer),super.disconnectedCallback()}updated(e){if(super.updated(e),e.has("_open")){this._open?this._updatePopper():this._destroyPopper();return}this._open&&this._updatePopper()}_safeDay(e){return d.safeDay(e)}_isInputFocused(){return this.shadowRoot?.activeElement===this._inputElement}_withinBounds(e){const t=this._safeDay(this.min),a=this._safeDay(this.max);return!(t&&e.isBefore(t,"day")||a&&e.isAfter(a,"day")||this.disabledDays.includes(e.day()))}_displayValue(){if(this.rangeMode&&this._rangeStart&&this._rangeEnd){const t=this._safeDay(this._rangeStart),a=this._safeDay(this._rangeEnd);if(t&&a)return`${t.format("DD/MM/YYYY")} - ${a.format("DD/MM/YYYY")}`}const e=this._safeDay(this.value);return e?e.format("DD/MM/YYYY"):""}_inputValue(){return this._inputDraft??this._displayValue()}_emitChange(e){this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e}})),this.onChange?.(e)}_emitRangeChange(){if(!this._rangeStart||!this._rangeEnd)return;const e={start:this._rangeStart,end:this._rangeEnd};this.dispatchEvent(new CustomEvent("rangeChange",{detail:e})),this.onRangeChange?.(e)}_showInputError(e){this._errorTimer&&clearTimeout(this._errorTimer),this._hasError=!0,this._errorMsg=e,this._errorTimer=setTimeout(()=>this._clearInputError(),3e3)}_clearInputError(){this._hasError=!1,this._errorMsg="",this._errorTimer&&(clearTimeout(this._errorTimer),this._errorTimer=null)}_toggleOpen(e){if(this.disabled)return;const t=e??!this._open;this._open=t,t&&this.updateComplete.then(()=>this._updatePopper())}_onInput(e){const t=e.target.value;this._inputDraft=t,t.trim()||(this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null)),this._clearInputError()}_parseSingleDate(e){for(const t of d.DATE_FORMATS){const a=_(e,t,!0);if(a.isValid())return a}return this._safeDay(e)}_parseRangeInput(e){const t=e.split(/\s+-\s+/);if(t.length!==2)return null;const a=this._parseSingleDate(t[0].trim()),n=this._parseSingleDate(t[1].trim());return!a||!n?null:a.isAfter(n,"day")?{start:n,end:a}:{start:a,end:n}}_onKeydown(e){(e.key==="Tab"||e.key==="Enter")&&this._parseAndSetDate()}_parseAndSetDate(){const e=this._inputElement;if(!e)return;const t=e.value.trim();if(!t){if(this.rangeMode&&this._rangeStart&&!this._rangeEnd)return;this._emitChange(null),this.rangeMode&&(this._rangeStart=null,this._rangeEnd=null),this._inputDraft=null;return}if(this.rangeMode){const n=this._parseRangeInput(t);if(n){if(this._withinBounds(n.start)&&this._withinBounds(n.end)){this._rangeStart=n.start.format("YYYY-MM-DD"),this._rangeEnd=n.end.format("YYYY-MM-DD"),this._inputDraft=null,this._clearInputError(),this._emitRangeChange();return}this._showInputError("Seçilen aralık sınırlar dışında.");return}const o=this._parseSingleDate(t);if(o&&this._withinBounds(o)){this._rangeStart=o.format("YYYY-MM-DD"),this._rangeEnd=null,this._inputDraft=null,this._clearInputError();return}this._showInputError("Geçersiz aralık formatı. Örnek: 19/09/2025 - 25/09/2025");return}const a=this._parseSingleDate(t);a&&this._withinBounds(a)?(this._emitChange(a.format("YYYY-MM-DD")),this._inputDraft=null,this._clearInputError()):this._showInputError("Geçersiz tarih formatı. Örnek: 19/09/2025")}_updatePopper(){if(!this._open||!this.isConnected)return;const e=this._referenceElement,t=this._popupElement;if(!e||!t)return;const a=Math.max(270,Math.round(e.getBoundingClientRect().width*(this.expandFactor||1)));if(t.style.width=`${a}px`,this._popperInstance){this._popperInstance.setOptions({placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()}),this._popperInstance.update();return}this._popperInstance=u.createPopper(e,t,{placement:"bottom",strategy:"fixed",modifiers:this._getPopperModifiers()})}_getPopperModifiers(){return[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8}},{name:"flip",options:{padding:8,fallbackPlacements:["top-start","right-start","left-start","bottom-end","top-end","right-end","left-end"]}}]}_destroyPopper(){this._popperInstance&&(this._popperInstance.destroy(),this._popperInstance=void 0)}_handleCalendarChange(e){this._emitChange(e.detail.value),this._inputDraft=null,this._toggleOpen(!1)}_handleCalendarRangeChange(e){this._rangeStart=e.detail.start,this._rangeEnd=e.detail.end,this._inputDraft=null,this._emitRangeChange(),this._toggleOpen(!1)}_handleCalendarStateChange(e){this._rangeStart=e.detail.rangeStart,this._rangeEnd=e.detail.rangeEnd}_handleSuffixClick(e){e.stopPropagation(),this._openDropdown(),this._inputElement?.focus()}_handleClearClick(e){e.stopPropagation(),this._emitChange(null),this._rangeStart=null,this._rangeEnd=null,this._inputDraft=null,this._clearInputError(),this._inputElement?.focus()}render(){const e=this.error||(this._hasError?this._errorMsg:""),t=!!this._displayValue();return s.html`
-      <div class="dp">
-        <div class="dp__reference">
-          <logosphere-formfield
-            class="dp__field"
-            .label=${this.label}
-            .helper=${this.helper}
-            .error=${e}
-            .required=${this.required}
-            .disabled=${this.disabled}
-            .readonly=${this.readonly}
-            .placeholder=${this.placeholder}
-            .size=${this.size}
-            .variant=${this.variant}
-            @click=${this._openDropdown}
-          >
-            <input
-              id=${this.inputId}
-              class="dp__input"
-              .value=${h.live(this._inputValue())}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              placeholder=${this.placeholder}
-              aria-label="Tarih girin"
-              aria-invalid=${e?"true":"false"}
-              @focus=${this._openDropdown}
-              @input=${this._onInput}
-              @keydown=${this._onKeydown}
-              @blur=${this._onBlur}
-            />
-            ${t?s.html`
-                  <button
-                    slot="clear"
-                    class="dp__icon-btn dp__icon-btn_suffix"
-                    type="button"
-                    aria-label="Temizle"
-                    @click=${this._handleClearClick}
-                  >
-                    <ui-icon name="uil-times" size="14"></ui-icon>
-                  </button>
-                `:s.nothing}
-            <button
-              id=${this.inputId+"-ico"}
-              slot="suffix"
-              class="dp__icon-btn"
-              type="button"
-              aria-label=${this._open?"Takvimi kapat":"Takvimi aç"}
-              aria-expanded=${this._open?"true":"false"}
-              aria-haspopup="dialog"
-              @click=${this._handleSuffixClick}
-            >
-              <ui-icon name="uil-calendar" size="16"></ui-icon>
-            </button>
-          </logosphere-formfield>
-        </div>
-
-        ${this._open?s.html`
-              <div
-                data-datepicker-popper
-                class="dp__popup"
-                role="dialog"
-                aria-modal="true"
-                aria-label="Tarih seçici"
-              >
-                <logosphere-calendar
-                  .value=${this.value}
-                  .min=${this.min}
-                  .max=${this.max}
-                  .disabled=${this.disabled}
-                  .rangeMode=${this.rangeMode}
-                  .disabledDays=${this.disabledDays}
-                  .rangeStart=${this._rangeStart}
-                  .rangeEnd=${this._rangeEnd}
-                  .closable=${!0}
-                  @change=${this._handleCalendarChange}
-                  @rangeChange=${this._handleCalendarRangeChange}
-                  @calendar-state-change=${this._handleCalendarStateChange}
-                  @close-request=${()=>this._toggleOpen(!1)}
-                ></logosphere-calendar>
-              </div>
-            `:s.nothing}
-      </div>
-    `}};exports.LedsDatePicker.styles=[s.css`
-      ${s.unsafeCSS(c)}
-    `];i([r.property({type:String})],exports.LedsDatePicker.prototype,"value",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"min",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"max",2);i([r.property({type:Boolean})],exports.LedsDatePicker.prototype,"required",2);i([r.property({type:Boolean})],exports.LedsDatePicker.prototype,"disabled",2);i([r.property({type:Boolean})],exports.LedsDatePicker.prototype,"readonly",2);i([r.property({type:Number})],exports.LedsDatePicker.prototype,"expandFactor",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"placeholder",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"label",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"helper",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"error",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"size",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"variant",2);i([r.property({type:Boolean})],exports.LedsDatePicker.prototype,"rangeMode",2);i([r.property({type:Array})],exports.LedsDatePicker.prototype,"disabledDays",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"rangeStart",2);i([r.property({type:String})],exports.LedsDatePicker.prototype,"rangeEnd",2);i([r.property({attribute:!1})],exports.LedsDatePicker.prototype,"onChange",2);i([r.property({attribute:!1})],exports.LedsDatePicker.prototype,"onRangeChange",2);i([r.state()],exports.LedsDatePicker.prototype,"_open",2);i([r.state()],exports.LedsDatePicker.prototype,"_rangeStart",2);i([r.state()],exports.LedsDatePicker.prototype,"_rangeEnd",2);i([r.state()],exports.LedsDatePicker.prototype,"_hasError",2);i([r.state()],exports.LedsDatePicker.prototype,"_errorMsg",2);i([r.state()],exports.LedsDatePicker.prototype,"_inputDraft",2);i([r.query(".dp__reference")],exports.LedsDatePicker.prototype,"_referenceElement",2);i([r.query("[data-datepicker-popper]")],exports.LedsDatePicker.prototype,"_popupElement",2);i([r.query("input")],exports.LedsDatePicker.prototype,"_inputElement",2);exports.LedsDatePicker=i([r.customElement("logosphere-datepicker")],exports.LedsDatePicker);